Webpack的幾點性能優化

Webpack的性能優化主要從打包時間和打包出來的包的大小來考慮

減小 Webpack 打包時間

優化 Loader

對於打包來講，loader越多說明代碼須要轉換的越多，則效率就越低，所以在優化loader的時候，能夠選擇loader的搜索範圍。

module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 選擇範圍，只在 src 文件夾下查找
        include: [resolve('src')],
        // 選擇範圍，不會去查找的路徑
        exclude: /node_modules/
      }
    ]
  }
}
複製代碼

爲何不去查找node_modules路徑下的文件呢？由於node_modules中使用的代碼都是編譯過的，所以無必要再去處理一下。

同時，還能夠將Babel編譯過的文件緩存起來，在下次須要編譯更改過的代碼文件就能夠，這樣能夠大大減小打包的時間

loader: 'babel-loader?cacheDirectory=true'
複製代碼

提早打包後引入

DllPlugin和DllReferencePlugin能夠將一些不作修改的依賴文件，提早打包，只有當類庫更新版本纔有須要從新打包，而且也實現了將公共代碼抽離成單獨文件的優化方案。

new webpack.DllPlugin({
  context: __dirname,
  name: "[name]_[hash]",
  path: path.join(__dirname, "manifest.json"),
})複製代碼

new webpack.DllReferencePlugin({
  context: __dirname, //文件中請求的上下文
  manifest: require("./manifest.json"), //生成manifest.json文件
  name: "./my-dll.js", //暴露的名稱（可選）
  scope: "xyz", //用於訪問dll的內容（可選）
  sourceType: "commonjs2" //dll是如何暴露的 （可選）
})複製代碼

//webpack.dll.conf.js

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    vendor: [
    'vue/dist/vue.esm.js',
    'vue-router',
    'vuex',
    'babel-polyfill' //提早打包一些基本不怎麼修改的文件
    ]
  },
  output: {
    path: path.join(__dirname, '../static/js'), //放在項目的static/js目錄下面
    filename: '[name].dll.js', //打包文件的名字
    library: '[name]_library' //可選 暴露出的全局變量名
    // vendor.dll.js中暴露出的全局變量名。
    // 主要是給DllPlugin中的name使用，
    // 故這裏須要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'), //生成上文說到清單文件，放在當前build文件下面，這個看你本身想放哪裏了。
      name: '[name]_library'
    }),  
    //壓縮 只是爲了包更小一點 
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console:true,
        drop_debugger:true
      },
      output:{
        // 去掉註釋內容
        comments: false,
      },
      sourceMap: true
    })
  ]
};複製代碼

//webpack.pro.conf.js 

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

  new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'), 
      manifest: require('./vendor-manifest.json')
    }),
    //這個主要是將生成的vendor.dll.js文件加上hash值插入到頁面中。
    new AddAssetHtmlPlugin([{
      filepath: path.resolve(__dirname,'../dist/static/js/vendor.dll.js'),
      outputPath: utils.assetsPath('js'),
      publicPath: path.posix.join(config.build.assetsPublicPath, 'static/js'),
      includeSourcemap: false,
      hash: true,
    }]),複製代碼

npm run build:dll  //這個命令在最初執行一次以後，以後發佈都不須要再重複執行了，除非webpack.dll.conf.js裏面的依賴文件有升級。
//發佈以前的打包
npm run build 複製代碼

代碼壓縮

使用UglifyJS 來壓縮代碼，由於這個是單線程運行的，爲了加快效率，能夠使用webpack-parallel-uglify-plugin來並行運行UglifyJS，從而提升效率。

在 Webpack4 中，咱們就不須要以上這些操做了，只須要將 mode 設置爲 production 就能夠默認開啓以上功能。

還有須要注意的是：

resolve.extensions：用來代表文件後綴列表，默認查找順序是 ['.js', '.json']，若是你的導入文件沒有添加後綴就會按照這個順序查找文件。咱們應該儘量減小後綴列表長度，而後將出現頻率高的後綴排在前面

resolve.alias：能夠經過別名的方式來映射一個路徑，能讓 Webpack 更快找到路徑

減小 Webpack 打包後的文件體積

Scope Hoisting

Scope Hoisting會分析出模塊之間的的依賴關係，儘量的把打包出來的模塊合併到一個函數中

// test.js
export const a = 1
// index.js
import { a } from './test.js'
複製代碼

對於這種狀況，咱們打包出來的代碼會相似這樣

[
  /* 0 */
  function (module, exports, require) {
    //...
  },
  /* 1 */
  function (module, exports, require) {
    //...
  }
]
複製代碼

可是若是使用 Scope Hoisting 的話，代碼就會盡量的合併到一個函數中去，也就變成了這樣的相似代碼

[
  /* 0 */
  function (module, exports, require) {
    //...
  }
]複製代碼

若是在 Webpack4 中你但願開啓這個功能，只須要啓用 optimization.concatenateModules 就能夠了

odule.exports = {
  optimization: {
    concatenateModules: true
  }
}
複製代碼