如今,webpack
毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack
知识。webpack
的基本用法这里就不展开讲了。主要探讨一下如何提高 webpack
的打包速度。
这篇文章以
vue cli3.0+
,webpack4.0+
,nodejs10.0+
这几个版本为例。
一、打包分析
1.1、速度分析
我们的目的是优化打包速度,那肯定需要一个速度分析插件,此时 speed-measure-webpack-plugin
就派上用场了。它的作用如下:
- 分析整个打包总耗时
- 每个
plugin
和loader
的耗时情况
首先,安装插件
npm i -D speed-measure-webpack-plugin
然后修改 vue.config.js
配置文件 (vuecli3+
版本的配置文件统一在这个文件里修改,如果没有该文件,在根目录新建一个)
// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 实例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
configureWebpack: smp.wrap({
plugins: [
// 这里是自己项目里需要使用到的其他插件
new yourOtherPlugin()
]
})
}
运行打包命令之后,可以看到,打包总耗时为 2min,51.99s
1.2、体积分析
分析完打包速度之后,接着我们来分析打包之后每个文件以及每个模块对应的体积大小。使用到的插件为 webpack-bundle-analyzer
,构建完成后会在 8888
端口展示大小。
首先,安装插件
npm i -D webpack-bundle-analyzer
修改 vue.config.js
配置文件
// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 导入体积分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
// 实例化速度分析插件
const smp = new SpeedMeasurePlugin();
module.exports = {
configureWebpack: smp.wrap({
plugins: [
// 实例化体积分析插件
new BundleAnalyzerPlugin()
]
})
}
构建之后可以看到