webpack 优化

基本步骤：

1. 修改基本的webpack配置来加速打包
2. 添加代码压缩插件
3. 提取公共代码

一、修改基本的webpack配置

1. 优化Loader配置
由于Loader对文件的转换操作很耗时，所以需要让尽可能少的文件被Loader处理。我们可以通过以下3方面优化Loader配置：
（1）优化正则匹配
（2）通过cacheDirectory选项开启缓存
（3）通过include、exclude来减少被处理的文件。实践如下：

{
  // 1、如果项目源码中只有js文件，就不要写成/\.jsx?$/，以提升正则表达式的性能
  test: /\.js$/,
  // 2、babel-loader支持缓存转换出的结果，通过cacheDirectory选项开启
  loader: 'babel-loader?cacheDirectory=true',
  // 3、只对项目根目录下的src 目录中的文件采用 babel-loader
  include: [resolve('src')]
},

2. 优化resolve.modules配置
resolve.modules用于配置Webpack去哪些目录下寻找第三方模块。resolve.modules的默认值是［node modules］，含义是先去当前目录的/node modules目录下去找我们想找的模块，如果没找到，就去上一级目录../node modules中找，再没有就去../ .. /node modules中找，以此类推，这和Node.js的模块寻找机制很相似。当安装的第三方模块都放在项目根目录的./node modules目录下时，就没有必要按照默认的方式去一层层地寻找，可以指明存放第三方模块的绝对路径，以减少寻找。

resolve: {
// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
modules: [path.resolve(__dirname,'node_modules')]
},

二、添加代码压缩插件

使用ParallelUglifyPlugin多进程压缩代码文件

（1）ParallelUglifyPlugin插件安装：
     $ npm i -D webpack-parallel-uglify-plugin
（2）webpack.prod.conf.js 文件进行配置
    const ParallelUglifyPlugin =require('webpack-parallel-uglify-plugin');
    plugins: [
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJs:{
        compress: {
          warnings: false,
          drop_debugger: true, // 去除生产环境的 debugger 和 console.log
          drop_console: true
        },
        sourceMap: true
      }
     }),
    ]

三、提取公共代码

如果将多个页面的公共代码抽离成单独的文件，就能优化以上问题 。Webpack内置了专门用于提取多个Chunk中的公共部分的插件CommonsChunkPlugin。

// 所有在 package.json 里面依赖的包，都会被打包进 vendor.js 这个文件中。
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function(module, count) {
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    );
  }
}),
// 抽取出代码模块的映射关系
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
}),

四、按需加载代码

通过vue写的单页应用时，可能会有很多的路由引入。当打包构建的时候，javascript包会变得非常大，影响加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

五、优化SourceMap

开发环境推荐： cheap-module-eval-source-map
生产环境推荐：cheap-module-source-map

image.png

补充：

优化lodash打包

在 使用 npm run build --report 查看打包的内容时发现lodash的打出来包很大，所以对lodash打包做了下优化。
方法一： 单独引入

  const debounce = require('lodash/debounce');

这种方法比较适合用的次数和方法比较少的情形，不然不同方法都要使用require 。

方法二：使用babel-loader在对*.js文件进行解析，然后借助于babel-plugin-lodash插件对引用的lodash进行类似tree shaking的操作，这样就可以去除未使用的lodash代码片段。

1. 安装依赖babel-plugin-lodash

npm i babel-loader @babel/core @babel/preset-env babel-plugin-lodash  --D

2.配置webpack.base.conf.js

...
module: {
  rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
              loader: 'babel-loader',
              options: {
                  presets: ['@babel/preset-env'],
                  plugins: ['lodash']
              }
          }
      }
  ]
}
...

3. 使用lodash-webpack-plugin可以进一步压缩lodash。
   3.1 安装lodash-webpack-plugin依赖：

npm i lodash-webpack-plugin --D

3.2 配置webpck

var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

...
plugins: [
    new LodashModuleReplacementPlugin,
]
...