個人webpack優化總結

exclude

loader指定排除node_modules下文件，減小文件範圍，同時減小各類loader處理文件所需時間。

{
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
    }
複製代碼

Dllplugin

dllplugin 用來將網頁依賴的基礎模塊先編譯出來，打包到一個個單獨的動態連接庫中去。這樣包含大量複用模塊的動態連接庫只須要編譯一次，在以後的構建過程當中被動態連接庫包含的模塊將不會在從新編譯，而是直接使用動態連接庫中的代碼。

首先接入Dllplugin將經常使用的模塊構建一次，同時生成manifest.json文件，文件清楚地描述了與其對應的 dll.js 文件中包含了哪些模塊，以及每一個模塊的路徑和 ID。

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom'],
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'build'),
    library: '_dll_[name]',
  },
  plugins: [ 
    new DllPlugin({
      name: '_dll_[name]',
      path: path.join(__dirname, 'build', '[name].manifest.json'),
    }),
  ],
};
複製代碼

而後在正常配置中引入DllReferencePlugin

plugins:[
    new DllReferencePlugin({
        manifest: require('./build/mainfest.json')
    })
]

複製代碼

執行過程： 開發過程當中先是webpack --config webpack.dll.js 編譯一次動態連接庫，而後正常 webpack --config webpack.config.js 便可。

HappyPack

webpack自己構建是單線程進行的，happypack就是用來讓webpack作到將任務分解成多個進程併發執行。

{ test: /(\.jsx|\.js)$/,
  use: 'happypack/loader?id=js', //告訴happypack 去選擇哪一個happypack實例去處理
  exclude: /node_modules/
}, {
test: /\.css$/,
use: 'happypack/loader?id=css'
},
複製代碼

new HappyPack({
    id:'js', //須要和上面的問號傳參相對應
    loaders:['babel-loader']
}),
new HappyPack({
    id:'css',
    threads:1, // 開啓幾個線程進行處理這些文件
    loaders:['style-loader','css-loader']
}),
複製代碼

按需加載

webpack 4以前須要使用commonChunksPlugin，在4這個版本再也不須要額外引入，默認使用。 具體配置參見segmentfault.com/a/119000001….

爲動態生成的chunk賦予名稱

import(/* webpackChunkName:"detail" */'./detail').then(({default}) => {})
複製代碼

同時支持上述語法須要配置babel插件。

npm install babel-plugin-syntax-dynamic-import -D
複製代碼

而後加入到.bablerc中的plugins中。

{
  "plugins": ["syntax-dynamic-import"]
}
複製代碼

同時若是使用React的話，能夠直接使用 Suspense 組件進行懶加載。

可視化分析工具

• webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

複製代碼

最後

這些只是在項目中已經採用的優化方法，會不斷尋找其餘方案同時試用，繼續更新這篇文章。