vuecli3.0项目搭建与webpack-bundle-analyzer分析
首先说一下vuecli低版本与cli3.0的项目结构的区别
少了build config 文件夹 如果需要进行webpack等配置
需要在根目录新建 vue.config.js
vue.config.js 文件内容 本次只记录 打包大小分析以及优化包大小
module.exports = {
publicPath: './',
// 输出文件目录
outputDir: 'dist',
// 静态资源目录 (js, css, img, fonts)
assetsDir: 'assets',
// webpack-dev-server 相关配置
devServer: {
// 默认打开浏览器
open: true,
// 端口号
port: 8080,
},
// webpack 配置
chainWebpack: (config) => {
// 第一 增加打包文件大小分析
if (process.env.use_analyzer) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
},
//webpack配置
configureWebpack: config => {
//警告 webpack 的性能提示
config.performance = {
hints: 'warning',
//入口起点的最大体积
maxEntrypointSize: 50000000,
//生成文件的最大体积
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.js');
}
},
// 打包忽略
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT'
}
}
}
第一 打包分析 webpack-bundle-analyzer
首先 下载依赖 npm intall webpack-bundle-analyzer –save-dev
其次 在vue.config.js文件配置
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
可以再package.json加入启动的命令
"scripts": {
"analyz": "use_analyzer=true npm run serve"
}
效果图