webpack打包优化解决方案

时间 2019-11-09

标签 webpack 打包优化解决方案繁體版

原文原文链接

单页应用首次进入项目会获取一部分数据，以后将JS包分片，走到那块再去加载那块的JS。
这样跨页面重复的JS，CSS没必要再去获取，跨页面就不会出现进度条。这样减小了等待时间，提高了用户体验，省去了没必要要的流量。
可是单页应用也有一个显著的问题：首次进入的时候，加载的资源太多，白屏时间太长。css

这里介绍一些经常使用的webpack打包优化解决方案node

使用插件查看项目全部包及体积大小
webpack外部扩展
DLL方式

1、查看项目打包

webpack有个插件，能够查看项目一共打了多少包，每一个包的体积，每一个包里面的包状况。
首先下载插件react

npm intall webpack-bundle-analyzer --save-dev

同时在webpack.config.js配置jquery

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

webpackConfig.plugins.push(new BundleAnalyzerPlugin());

在package.json中添加命令webpack

“script”: {
    "analyz": "NODE_ENV=production npm_config_report=true npm run deploy:prod"
}

个人webpack是1.X的 webpack 2.X的同窗请看git

而后命令行输入github

npm run analyz

开始构建，根据项目大小不一样，时间也不一样。
过一会输出结果以下：web

能够清晰的看到项目中一共有多少个包，包的体积是多少，里面加载了哪些东西，大小是多少。
这里演示的是一个干净的demo，打的包不多，体积也都很小，在真正项目中可能截图以下：npm

能够看到五光十色的十分好看。
这里面 app.js 和 vendor.js是项目的主文件，其中包含了少部分业务代码和大部分公共依赖。
剩余的 number.hash.chunk.js是业务分片的代码，其中包含了大部分业务代码和少部分公共依赖。
到这里，咱们就是用工具完成对项目打包的展现。json

2、webpack外部扩展

列出了项目中较大的包，剩下的事情就是想办法如何减少这些包的体积（将一个大包拆成多个小包）。
项目中产生较大的包的缘由能够从两个方面去考虑：

项目中引入的依赖包过于庞大；
业务代码集中在一块写，或者是业务代码写的比较繁琐；

对于这两个问题，咱们能够从两个方面着手解决：

抽离项目中公共依赖的、不常变更的、体积较大的包；
将一个较大的业务代码文件，拆成多个较小的文件，异步加载（或者优化业务代码）。

这里面第二项涉及到改动业务代码，具体的状况就不一样了，适合查看如何优化JS代码。
咱们来讨论第一种方法，在不改动业务代码的状况下，如何减少公共依赖。

要知道这些依赖是咱们须要的，不可能排除不引入。
可是他们都是全局依赖的，万年不变的，可使用浏览器本身的缓存来实现不重复加载。
具体作法就是：
将项目中须要的一些公共依赖包，而且不常变更的，单独取出，再也不每次都打包编译（如React，Redux等）。
而是经过使用script标签形式cdn引入，这样在有缓存的状况下，这些资源均走缓存，没必要加载。

具体作法：

总结须要抽离的公共依赖。

这些依赖须要知足必定的条件：

体积较大；
不常更新；
依赖较多；
是前置依赖；

常见的知足这类条件的包有：

react
react-dom
redux
react-redux
moment
jquery

另一些包文件如 Antd库文件，整个包较大，可是每次用什么取什么的话，库文件也会按需加载，没必要单独取出。
还有这类库文件不建议单独取出，由于里面可能会有bug，须要更新。

使用CDN引入资源

以个人demo为例：我须要抽离出的文件有 react，react-dom，react-router，redux，react-redux，history。
将这些文件放到cnd上，注意，这些文件要是压缩版本，而且是用ES5编写的，不然浏览器报错。

<head>
  <title>React Starter Kit</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 体积较大的包 -->
  <script src="https://cdn.bootcss.com/react/15.0.0/react-with-addons.min.js"></script>
  <script src="https://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script>
  <script src="https://cdn.bootcss.com/react-router/3.0.0/ReactRouter.min.js"></script>
  <script src="https://cdn.bootcss.com/redux/3.6.0/redux.min.js"></script>
  <script src="https://cdn.bootcss.com/react-redux/5.0.1/react-redux.min.js"></script>
  <script src="https://cdn.bootcss.com/history/4.5.0/history.min.js"></script>
</head>

配置webpack.conf.js

资源已经引入，接下来须要配置webpack，使其打包的时候不在将这些资源打包。

const webpackConfig = {
    name: 'client',
    target: 'web',
    devtool: config.compiler_devtool,
    resolve: {
        root: paths.client(),
        extensions: ['', '.js', '.jsx', '.json'],
    },
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
        'react-router': 'ReactRouter',
        'redux': 'Redux',
        'history': 'History'
    },
    module: {},
}

这里externals告诉webpack那些资源从哪里寻找。
该对象的键表示 require 或者 import 时候的字符串
值表示的当前环境下的变量，好比引入React以后，React被做为全局对象，webpack就回去寻找React对象。
若是其中有一个找不到，打包就会失败。

配置vendor.js

接下来配置vendor，使vendor也不打包该些JS

compiler_vendors : [
    // 'react',
    // 'react-redux',
    // 'react-router',
    // 'redux',
],

接下来再次运行 npm run analyz

对比第一次的效果图，很明显app.js由原来的625kb减小到了78kb，
原来第二大的vendor.js如今已经很小了。
可是要注意的是，并非包越小越好，越小的包反而越耗费连接。
应该让你的包里面的业务代码占大多数。
后来被告知，最大的包的体积压缩以后80k之内就能够。

3、DLL方式

dll 全称是：dynamic link library（动态连接库）
dll方式也就是经过配置，告诉webpack指定库在项目中的位置，从而直接引入，不将其打包在内。
上面介绍的方式是将包放到cdn上，build的时候不在引入对应的包；
dll方式就是指定包在项目中，build的时候不在打包对应的包，使用的时候引入。
webpack经过webpack.DllPlugin与webpack.DllReferencePlugin两个内嵌插件实现此功能。

新建webpack.dll.config.js

const webpack = require('webpack');

module.exports = {
    entry: {
        bundle: [
            'react',
            'react-dom',
            //其余库
            ],
    },
    output: {
        path: './build',
        filename: '[name].js',
        library: '[name]_library'
    },
    plugins: [
        new webpack.DllPlugin({
            path: './build/bundle.manifest.json',
            name: '[name]_library',
        })
    ]
};

webpack.DllPlugin选项：

path：manifest.json文件的输出路径，这个文件会用于后续的业务代码打包；
name：dll暴露的对象名，要跟output.library保持一致;
context：解析包路径的上下文，这个要跟接下来配置的 webpack.config.js 一致。

运行文件

运行：webpack --config webpack.dll.config.js

生成两个文件，一个是打包好的bundlejs，另一个是bundle.mainifest.json，大体内容以下：

{
  "name": "bundle_library",
  "content": {
    "./node_modules/react/react.js": 1,
    "./node_modules/react/lib/React.js": 2,
    "./node_modules/process/browser.js": 3,
    "./node_modules/object-assign/index.js": 4,
    "./node_modules/react/lib/ReactChildren.js": 5,
    "./node_modules/react/lib/PooledClass.js": 6,
    "./node_modules/react/lib/reactProdInvariant.js": 7,
    //其余引用
}

配置webpack.config.js

const webpack = require('webpack');
var path = require('path');
module.exports = {
  entry: {
    main: './main.js',
  },
  output: {
    path: path.join(__dirname, "build"),
    publicPath: './',
    filename: '[name].js'
  },
  module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
      {
        test: /\.jsx?$/,
        loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
        include: path.join(__dirname, '.')
      }
    ]
  },
  plugins: [
     new webpack.DllReferencePlugin({
      context: '.',
      manifest: require("./build/bundle.manifest.json"),
        }),
  ]
};

webpack.DllReferencePlugin的选项中：

context：须要跟以前保持一致，这个用来指导webpack匹配manifest.json中库的路径；
manifest：用来引入刚才输出的manifest.json文件。

参考连接：

完整的项目demo