1.添加speed-measure-webpack-plugin插件

使用步骤

安装speed-measure-webpack-plugin依赖

npm

require(speed-measure-webpack-plugin);configureWebpack:{plugins:

[//开启打包计时new

SpeedMeasurePlugin()]2.添加webpack-bundle-analyzer分析项目打包后文件的占比

使用步骤

webpack-bundle-analyzer配置vue.config.js文件

module.exports

config.plugin(webpack-bundle-analyzer).use(require(webpack-bundle-analyzer).BundleAnalyzerPlugin);

}},

};在package.json文件汇总添加analyz分析命令

scripts:

由于有大量文件需要解析和处理构建是文件读写和计算密集型的操作特别是当文件数量变多后Webpack

构建慢的问题会显得严重。

文件读写和计算操作是无法避免的那能不能让

Webpack

做到这点它把任务分解给多个子进程去并发的执行子进程处理完后再把结果发送给主进程。

使用步骤

HappyPack({id:babel,loaders:[babel-loader?cacheDirectorytrue],threadPool:happyThreadPool}),}chainWebpack(config)

{//开启happypackconst

config.module.rule(js);jsRule.uses.clear();jsRule.use(happypack/loader?idbabel).loader(happypack/loader?idbabel).end();······}

2.开启noParse

**原理**如果一些第三方模块没有AMD/CommonJS规范版本可以使用

noParse

/^(lodash|moment)$/},}3.添加DllPlugin

**原理**有些时候如果所有的JS文件都打成一个JS文件会导致最终生成的JS文件很大这个时候我们就要考虑拆分

DllPlugin

将不会频繁更新的库进行编译当这些依赖的版本没有变化时就不需要重新编译。

我们新建一个

webpack

add-asset-html-webpack-plugin^3.1.3

const

require(clean-webpack-plugin)//

const

[topology-vue,element-ui],},output:

{path:

webpack.DefinePlugin({process.env:

{NODE_ENV:

package.json新增一条命令要安装webpack-cli

scripts:

require(webpack/lib/DllReferencePlugin);configureWebpack:{//开启dllnew

webpack.DllReferencePlugin({context:

require(./public/vendor/vendor-manifest.json)}),public

!--

src./vendor/vendor.dll.js/script4.添加gzip

使用步骤

/\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/,

10240,

归档需要进行压缩的文件大小最小值我这个是10K以上的进行压缩deleteOriginalAssets:

false