如何优化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分钟左右确实有很大变化，但是这还不是最终目标，还在继续摸索中，大家有更好的方法可以分享出来，一起学习