如何優化vue項目提升打包速度減小打包之后的文件大小

項目一開始打包需要30分鍾，實在是太慢，經過優化之后打包時間縮短到5分鍾之內，並且項目體積由原來的400多M縮小到現在的60多M，可以說是實現了質的飛越，這一切功勞都歸功於網上的大神提供的方法，我分享出來大家一起學習

 

DLLPlugin 和 DLLReferencePlugin的使用

DLLPlugin 和 DLLReferencePlugin 用某種方法實現了拆分 bundles，同時還大大提升了構建的速度。

1.首先build文件夾添加----webpack.dll.config.js:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  // 要打包的模塊的數組
  entry: {
    vendor: ['vue/dist/vue.esm.js','vue-router']
  },
  output: {
    path: path.join(__dirname, '../static/js'), // 打包后文件輸出的位置
    filename: '[name].dll.js',// vendor.dll.js中暴露出的全局變量名。
    library: '[name]_library' // 與webpack.DllPlugin中的`name: '[name]_library',`保持一致。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library', 
      context: __dirname
    }),
  ]
};

2.在package.json的scripts里加上：

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

3.運行npm run dll 在static/js下生成vendor-manifest.json;

4.在build/webpack.base.conf.js里加上：

// 添加DllReferencePlugin插件
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
    })
  ],

5.然后在index.html中引入vendor.dll.js：

<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>

做完這些打包時間由原來的30分鍾左右縮短到18分鍾左右，還沒達到預期的目標，所以繼續優化

 

由於運行在 Node.js 之上的 Webpack 是單線程模型的，所以Webpack 需要處理的事情需要一件一件的做，不能多件事一起做。
我們需要Webpack 能同一時間處理多個任務，發揮多核 CPU 電腦的威力，HappyPack 就能讓 Webpack 做到這點，它把任務分解給多個子進程去並發的執行，子進程處理完后再把結果發送給主進程。

由於 JavaScript 是單線程模型，要想發揮多核 CPU 的能力，只能通過多進程去實現，而無法通過多線程實現。

提示：由於HappyPack 對file-loader、url-loader 支持的不友好，所以不建議對該loader使用。

使用 HappyPack

修改你的webpack.config.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',
        //排除node_modules 目錄下的文件
        exclude: /node_modules/
      },
    ]
  },
plugins: [
    new HappyPack({
        //用id來標識 happypack處理那里類文件
      id: 'happyBabel',
      //如何處理  用法和loader 的配置一樣
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
      }],
      //共享進程池
      threadPool: happyThreadPool,
      //允許 HappyPack 輸出日志
      verbose: true,
    })
  ]
}

 

使用  happypack模塊必須同時安裝  webpack-parallel-uglify-plugin，os模塊否則會報錯
npm i happypack  

npm i -D webpack-parallel-uglify-plugin

npm i os

這一系列操作之后打包時間縮短到5分鍾左右，比起之前的18分鍾左右確實有很大變化，但是這還不是最終目標，還在繼續摸索中，大家有更好的方法可以分享出來，一起學習