webpack 打包 性能優化

當我們在打包一些大的項目的時候，會發現，打包的時間非常非常的長。

這時候除了等待，我們還可以思考如何提高webpack 打包效率。

比如下面幾個點：

1.  版本更新（技術迭代）

      升級 webpack / node / npm / yarn 版本

2. 儘可能少的模塊上應用 Loader

 如下，我們通過設施exclude，使node_modules 中的代碼，不用loader （也可以設置include：path.resolve(__dirname, ../src)）

{
      test: /\.js$/,
      exclude: /node_modules/,
      use: [
          {
              loader: 'babel-loader'
          },
          // {
          //     loader: 'imports-loader?this=>window'
          // }
      ]
    }

這樣就降低了 loader 被頻繁執行的頻率。

3. 儘可能少地使用plugin 並確保plugin可靠

    儘可能使用官方推薦的plugin ，一般性能有保證

4. resolve 參數合理配置（儘量少配一些）

我們可以給webpack 配置resolve 參數，如下。

當我們引入其他目錄下的模塊的時候（沒寫擴展名），webpack 會根據配置的默認的擴展名挨個查目錄下文件直到找到文件。

  resolve: {
    extensions: ['.js', '.vue', '.json']
  },

5. 使用DllPlugin 提高打包速度

我們每次打包，都會重新將node_modules 中的內容進行處理，那麼爲什麼不把它單獨拿出來，然後只打包一次，以後使用這一次的好呢。於是，我們先寫一個配置文件，如下。這樣運行這個打包配置，就可以將我們需要的兩個庫打包到/dll/venders.sll.js 中了。

const path = require('path')

module.exports = {
    mode: 'production',
    entry: {
        venders: ['vue', 'lodash']
    },
    output: {
        filename: "[name].dll.js",
        path: path.resolve(__dirname, '../dll')
    }
}

那麼項目中要如何使用呢。我們可以給上面的output 配置項，配置library 如下。

const path = require('path')

module.exports = {
    mode: 'production',
    entry: {
        venders: ['vue', 'lodash']
    },
    output: {
        filename: "[name].dll.js",
        path: path.resolve(__dirname, '../dll'),
        library: '[name]'
    }
}

然後，我們需要安裝一個插件 add-asset-html-webpack-plugin，如下。

npm install add-asset-html-webpack-plugin --save

然後，回到webpack.config.js 中，添加這個plugin，如下。

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

module.exports = {
  plugins: [
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      }),
      new CleanWebpackPlugin(),
      new addAssetHtmlWebpackPlugin({
          filePath: path.resolve(__dirname, '../dll/vendors.dll.js')
      })
  ]
...
}

接下來，我們來做一個webpack 中的映射。打開新的webpack配置文件（只打包node_modules代碼的），如下。

const path = require('path')
const webpack = require('webpack')

module.exports = {
    mode: 'production',
    entry: {
        venders: ['vue', 'lodash']
    },
    output: {
        filename: "[name].dll.js",
        path: path.resolve(__dirname, '../dll'),
        library: '[name]'
    },
    plugins: [
        new webpack.DllPlugin({
            name: '[name]',
            path: path.resolve(__dirname, '../dll/[name].manifest.json')
        })
    ]
}

上面plugin 中配置，意思是 使用webpack.DllPlugin 工具，對name 文件進行分析，把name 文件中第三方模塊的映射關係找出來，並寫到path 中。

有了這個映射文件，那麼webpack 打包的時候，對代碼進行分析，如果代碼是在這個映射文件中，那麼就可以直接使用vendors.dll.js 即可。

這時，把映射文件關聯上，就需要我們再去 webpack.config.js 中配置另一項 plugin 了，如下。

  plugins: [
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      }),
      new CleanWebpackPlugin(),
      new addAssetHtmlWebpackPlugin({
          filePath: path.resolve(__dirname, '../dll/vendors.dll.js')
      }),
      new webpack.DllReferencePlugin({
          manifest:path.resolve(__dirname, '../dll/vendors.manifest.json')
      })
  ]

6. thread-loader, parallel-webpack, happypack 多進程打包

7. 合理使用source-map

...