解决vue-cli npm run build之后vendor.js文件过大的问题(打包优化)
2018-08-27 10:44
1471 查看
https://www.geek-share.com/detail/2722313354.html
问题
vue-cli
npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓慢的问题。
解决方案
像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入,没有必要打包到vendor.js中。
1.在项目根目录index.html使用cdn节点导入
[code]<div id="app"></div> <!-- 先引入 Vue --> <!--开发环境--> <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script> <!--生产环境--> <!--<script src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>--> <!-- 引入组件库 --> <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/1.4.10/index.js"></script>
2.项目根目录下
build/webpack.base.config.js中添加
externals
[code]externals: { vue: 'Vue', 'element': 'element-ui', 'axios':'axios', },
3.
main.js中
import ... from ...就可以去掉了,若没去掉webpack还是会把对应的依赖进行打包。
2018.01.27补充
在项目
config/index.js中可以开启gzip压缩,对打包优化也有很大的帮助
1.首先安装插件 compression-webpack-plugin
[code]cnpm install --save-dev compression-webpack-plugin
2.设置
productionGzip: true
[code] // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: true, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report
3.
npm run build执行后会发现每个js和css文件会压缩一个gz后缀的文件夹,浏览器如果支持g-zip 会自动查找有没有gz文件 找到了就加载gz然后本地解压 执行。 阅读更多
相关文章推荐
- 解决vue-cli npm run build之后vendor.js文件过大的问题
- 基于vue-cli npm run build之后vendor.js文件过大的解决方法
- 解决vue-cli脚手架打包后vendor文件过大的问题
- vue-cli npm run build空白页的两个坑 webpack gzip文件压缩优化打包文件
- 解决Vue-cli npm run build生产环境打包,本地不能打开的问题
- vue-cli 打包 npm run build 后的问题
- 使用vue打包时vendor文件过大或者是app.js文件很大的问题
- vue-cli 打包压缩(npm run build)文件后,默认根目录修改
- vue-cli 项目打包 npm run build
- vue-cli中解决css引用图片打包后找不到文件资源的问题
- vue-cli构建项目 npm run build打包后怎么在本地查看效果
- 解决Vue打包之后文件路径出错的问题
- vuejs项目打包之后的首屏加载优化及打包之后出现的问题
- 解决Windows和Linux使用npm打包js和css文件不同的问题
- vue-cli项目webpack打包后iconfont文件路径问题解决
- 【Vue】项目打包的时候,build.js文件过大,可以通过设置懒加载或者按照路由分模块加载进行打包
- vue项目打包之后js文件过大怎么办?
- vue +vue-cli+vue router ,npm run build 打包完页面空白,不显示URL的#号router模式为history
- 学习vue-cli时需要引入外部js库文件(如jquery)的问题,百度后解决了,再次备忘一下
- 解决vue-cli项目webpack打包后iconfont文件路径的问题