说在前面
webpack
作为一个知名的前端工程打包工具,为我们提供了很大的便利,打包后的文件晦涩难懂,但是当我们尝试打包调优时,又不得不去了解下打包的细节,了解某一个文件是由哪些内容打包而成,下面给大家介绍一种工具。
开门见山
webpack-bundle-analyzer
文件可以很形象的展示打包的细节。
安装:
# NPM
npm install --save-dev webpack-bundle-analyzer //
# Yarn
yarn add -D webpack-bundle-analyzer
小贴士: 为什么要通过 --save-dev
的方式安装,因为这个工具只是开发时需要,发布后系统运行并不依赖此工具。
使用:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
如果使用的是vue-cli
创建的项目:
// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
更多内容参见:vue cli修改默认webpack配置
如此一来,便可以通过运行命令来进行打包,顺便查看打包详情。
npm run build
最后
是的,你没猜错,页面时打包完成时自动打开的。