Vue项目构建与性能优化

拆分DllPlugin

1、根目录首先要创建一个webpack.dll.config.js的文件

2、在package.json下面的script添加

"dll": "webpack -p --progress --config ./webpack.dll.config.js",

3、执行 npm run dll 会生成vendor.dll.js和vendor.manifest.json两个文件，不多赘述

4、在vue.config.js

`cnpm i add-asset-html-webpack-plugin -D`

add-asset-html-webpack-plugin插件是把打包出来的dll.js引入到index.html中

5、执行npm run build 进行打包

时间上也比之前快了10S左右;

使用uglifyjs-webpack-plugin插件缩小javaScript

在压缩过程中对碎片化的冗余代码（如 console 语句、注释等）进行自动化删除;parallel使用多进程并行运行可提高构建速度，因此强烈建议使用，对文件体积，构建速度都有显著效果！

安装npm install uglifyjs-webpack-plugin --save-dev

在vue.config.js引入const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

   new UglifyJsPlugin({       
     uglifyOptions: {         
       cache: true, // 启用缓存         
       compress: {           
         drop_debugger: true,           
         drop_console: true, //生产环境自动删除console  
       }, 
       output: { 
        // 不保留注释                        
        comments: false, beautify: false  
      }, 
     warnings: false,                
    },
    sourceMap: false,
    parallel: true, //使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。  
});

moment构建优化

在项目中经常会使用到moment做一些时间处理，但是monment里面包含了很多语言包都会打进项目里面，导致了项目体积变大，构建速度减慢。可以使用webpack的IgnorePlugins

进行忽略掉，在vue.config.js里面添加：

new webpack.IgnorePlugin(/\.\/locale/, /moment/)

import moment from 'moment'
//手动引入所需要的语言包
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

HardSourceWebpackPlugin

对一些打包的文件进行缓存，这样可以提高构建速度！效果也非常显著！

首先通过npm i -D hard-source-webpack-plugin来安装插件；

var HardSourceWebpackPlugin = 
    require('hard-source-webpack-plugin');
module.exports = {
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}