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

...

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章