查看打包体积
npm install webpack-bundle-analyzer -save-dev
chainWebpack: config => {
if (process.env.NODE_ENV === "development") {
config
.plugin("webpack-bundle-analyzer")
.use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
}
},
- 运行npm run serve 就可以看到
- 目前我运行的这个项目是个新项目提交较小。
- 当项目依赖比较多的时候,包的体积会变大
体积优化
- 当项目依赖过多时,这是包的体积就会变大,影响项目加载速度
webpack官网简介
- 列如echarts的引入,去官网下载最新的解压文件
一个压缩一个未压缩 - index.html引入
<script src="./js/echarts.js"></script>
- 这里可以做下判断。开发环境引未压缩的,生成环境引压缩版本
- 然后在vue.config.js配置
configureWebpack: config => {
config.externals = {
echarts: "echarts"
};
},
- 说明:echarts: “echarts”'的写法主要是因为项目中导入的import echarts from ‘echarts’
- 引号前面的是项目中使用到的第三方引入的包名
- 引号后面的会从引入的文件中查找相应的变量
- 配置完后,就可以在项目中import echarts from 'echarts’引入echarts就不会报错了
- 像vue和elemengUI等都可以按照次方式来引入配置,就可以减少打包的体积