基本步驟：

1. 修改基本的webpack配置來(lái)加速打包
2. 添加代碼壓縮插件
3. 提取公共代碼

一、修改基本的webpack配置

1. 優(yōu)化Loader配置
由于Loader對(duì)文件的轉(zhuǎn)換操作很耗時(shí)，所以需要讓盡可能少的文件被Loader處理。我們可以通過(guò)以下3方面優(yōu)化Loader配置：
（1）優(yōu)化正則匹配
（2）通過(guò)cacheDirectory選項(xiàng)開啟緩存
（3）通過(guò)include、exclude來(lái)減少被處理的文件。實(shí)踐如下：

{
  // 1、如果項(xiàng)目源碼中只有js文件，就不要寫成/\.jsx?$/，以提升正則表達(dá)式的性能
  test: /\.js$/,
  // 2、babel-loader支持緩存轉(zhuǎn)換出的結(jié)果，通過(guò)cacheDirectory選項(xiàng)開啟
  loader: 'babel-loader?cacheDirectory=true',
  // 3、只對(duì)項(xiàng)目根目錄下的src 目錄中的文件采用 babel-loader
  include: [resolve('src')]
},

2. 優(yōu)化resolve.modules配置
resolve.modules用于配置Webpack去哪些目錄下尋找第三方模塊。resolve.modules的默認(rèn)值是［node modules］，含義是先去當(dāng)前目錄的/node modules目錄下去找我們想找的模塊，如果沒找到，就去上一級(jí)目錄../node modules中找，再?zèng)]有就去../ .. /node modules中找，以此類推，這和Node.js的模塊尋找機(jī)制很相似。當(dāng)安裝的第三方模塊都放在項(xiàng)目根目錄的./node modules目錄下時(shí)，就沒有必要按照默認(rèn)的方式去一層層地尋找，可以指明存放第三方模塊的絕對(duì)路徑，以減少尋找。

resolve: {
// 使用絕對(duì)路徑指明第三方模塊存放的位置，以減少搜索步驟
modules: [path.resolve(__dirname,'node_modules')]
},

二、添加代碼壓縮插件

使用ParallelUglifyPlugin多進(jìn)程壓縮代碼文件

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

三、提取公共代碼

如果將多個(gè)頁(yè)面的公共代碼抽離成單獨(dú)的文件，就能優(yōu)化以上問題 。Webpack內(nèi)置了專門用于提取多個(gè)Chunk中的公共部分的插件CommonsChunkPlugin。

// 所有在 package.json 里面依賴的包，都會(huì)被打包進(jìn) vendor.js 這個(gè)文件中。
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
    );
  }
}),
// 抽取出代碼模塊的映射關(guān)系
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
}),

四、按需加載代碼

通過(guò)vue寫的單頁(yè)應(yīng)用時(shí)，可能會(huì)有很多的路由引入。當(dāng)打包構(gòu)建的時(shí)候，javascript包會(huì)變得非常大，影響加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)的組件，這樣就更加高效了。這樣會(huì)大大提高首屏顯示的速度，但是可能其他的頁(yè)面的速度就會(huì)降下來(lái)。

五、優(yōu)化SourceMap

開發(fā)環(huán)境推薦： cheap-module-eval-source-map
生產(chǎn)環(huán)境推薦：cheap-module-source-map

image.png

補(bǔ)充：

優(yōu)化lodash打包

在 使用 npm run build --report 查看打包的內(nèi)容時(shí)發(fā)現(xiàn)lodash的打出來(lái)包很大，所以對(duì)lodash打包做了下優(yōu)化。
方法一： 單獨(dú)引入

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

這種方法比較適合用的次數(shù)和方法比較少的情形，不然不同方法都要使用require 。

方法二：使用babel-loader在對(duì)*.js文件進(jìn)行解析，然后借助于babel-plugin-lodash插件對(duì)引用的lodash進(jìn)行類似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可以進(jìn)一步壓縮lodash。
   3.1 安裝lodash-webpack-plugin依賴：

npm i lodash-webpack-plugin --D

3.2 配置webpck

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

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