記錄初次webpack對vue項目打包優化

先上圖：最終打包速度從11s多優化到了4.177s，二次打包後提高到了3s多

因初次作優化，使用的東西是一些文檔的，優化內容較少。

末尾提供相關文檔鏈接。

第一步： 壓縮代碼用ParalleUglifyPlugin代替自帶的UglifyJsPlugin插件

優化原理

（1）默認狀況下 webpack 使用 UglifyJS 插件進行代碼壓縮，但因爲其採用單線程壓縮，速度很慢。

（2）咱們能夠改用 webpack-parallel-uglify-plugin 插件，它能夠並行運行 UglifyJS 插件，從而更加充分、合理的使用 CPU 資源，從而大大減小構建時間。

操做步驟 （1）執行以下命令安裝 webpack-parallel-uglify-plugin

（1）npm i webpack-parallel-uglify-plugin

（2）打開 build/webpack.prod.conf.js 文件，並做以下修改： const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

//....

// 刪掉webpack提供的UglifyJS插件

//new UglifyJsPlugin({

//  uglifyOptions: {

//    compress: {

//      warnings: false

//    }

//  },

//  sourceMap: config.build.productionSourceMap,

//  parallel: true

//}),

// 增長 webpack-parallel-uglify-plugin來替換

new ParallelUglifyPlugin({

  cacheDir: '.cache/',

  uglifyJS:{

    output: {

      comments: false

    },

    compress: {

      warnings: false

    }

  }

}),
複製代碼

第二步： 利用 DllPlugin 和 DllReferencePlugin 預編譯資源模塊

1，優化原理 （1）咱們的項目依賴中一般會引用大量的 npm 包，而這些包在正常的開發過程當中並不會進行修改，可是在每一次構建過程當中卻須要反覆的將其解析，而下面介紹的兩個插件就是用來規避此類損耗的：

DllPlugin 插件：做用是預先編譯一些模塊。 DllReferencePlugin 插件：它的所用則是把這些預先編譯好的模塊引用起來。 （2）注意：DllPlugin 必需要在 DllReferencePlugin 執行前先執行一次，dll 這個概念應該也是借鑑了 windows 程序開發中的 dll 文件的設計理念。

2，操做步驟 （1）在 build 文件夾中新建 webpack.dll.conf.js 文件，內容以下（主要是配置下須要提早編譯打包的庫）：

const path = require('path');

const webpack = require('webpack');

module.exports = {

entry: {

vendor: ['vue/dist/vue.common.js',

        'vue-router',

        'axios',

        'mint-ui',

        'vue-cordova',

        '@fortawesome/fontawesome-svg-core',

        '@fortawesome/free-solid-svg-icons',

        '@fortawesome/free-regular-svg-icons',

        '@fortawesome/free-brands-svg-icons',

        '@fortawesome/vue-fontawesome']
複製代碼

},

output: {

path: path.join(__dirname, '../static/js'),

filename: '[name].dll.js',

library: '[name]_library'       // vendor.dll.js中暴露出的全局變量名
複製代碼

},

plugins: [

new webpack.DllPlugin({

  path: path.join(__dirname, '.', '[name]-manifest.json'),

  name: '[name]_library'

}),

new webpack.optimize.UglifyJsPlugin({

  compress: {

    warnings: false

  }

})
複製代碼

]

};

（2）在package.json/scripts下中添加dll命令

"dll": "webpack --config ./build/webpack.dll.conf.js"

運行:

npm run dll

而後再

npm run dev或npm run build

提取公共代碼 使用CommonsChunkplugin提取公共的模塊，能夠減小文件體積，也有助於瀏覽器層的文件緩存

npm run dll npm run dev 或npm run build

第三步：www.hangge.com/blog/cache/… 使用 HappyPack 來加速代碼構建

1，優化原理

（1）因爲運行在 Node.js 之上的 Webpack 是單線程模型的，因此 Webpack 須要處理的事情只能一件一件地作，不能多件事一塊兒作。

（2）而 HappyPack 的處理思路是：將原有的 webpack 對 loader 的執行過程，從單一進程的形式擴展多進程模式，從而加速代碼構建。

2，操做步驟

（1）執行以下命令安裝 happypack：

（1）npm i happypack
（2）打開 build/webpack.base.conf.js 文件，並做以下修改：
複製代碼

const HappyPack = require('happypack');

const os = require('os');

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {

module: {

rules: [
  {
    test: /\.js$/,
    //把對.js 的文件處理交給id爲happyBabel 的HappyPack 的實例執行
    loader: 'happypack/loader?id=happyBabel',
    include: [resolve('src')],
    //排除node_modules 目錄下的文件
    exclude: /node_modules/
  },
]
複製代碼

},

plugins: [

new HappyPack({
    //用id來標識 happypack處理那裏類文件
  id: 'happyBabel',
  //如何處理  用法和loader 的配置同樣
  loaders: [{
    loader: 'babel-loader?cacheDirectory=true',
  }],
  //共享進程池
  threadPool: happyThreadPool,
  //容許 HappyPack 輸出日誌
  verbose: true,
})
複製代碼

] }

相關鏈接： 1，Webpack3.X升級到4.X多頁面實戰和構建優化： juejin.im/post/5bd036…

2，vue webpack打包優化： blog.csdn.net/song_de/art…

3，DLLPlugin 和 DLLReferencePlugin webpack.docschina.org/plugins/dll…

4，Vue.js - 提升項目build打包速度（webpack構建性能優化技巧彙總） www.hangge.com/blog/cache/…