vuecli3.0项目搭建与webpack-bundle-analyzer分析
首先说一下vuecli低版本与cli3.0的项目结构的区别
少了build config 文件夹 如果需要进行webpack等配置
需要在根目录新建 vue.config.js
cli低版本 cli高版本
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"
}
效果图
