基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018-09-27 14:22
2596 查看
问题
vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓慢的问题。
解决方案
像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入,没有必要打包到vendor.js中。
1.在项目根目录index.html使用cdn节点导入
<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
externals: { vue: 'Vue', 'element': 'element-ui', 'axios':'axios', },
3.mian.js中import ... from ...就可以去掉了,若没去掉webpack还是会把对应的依赖进行打包。
2018.01.27补充
在项目config/index.js中可以开启gzip压缩,对打包优化也有很大的帮助
1.首先安装插件 compression-webpack-plugin
cnpm install --save-dev compression-webpack-plugin
2.设置productionGzip: true
// 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)文件后,默认根目录修改
- express 4.14.1版本 npm版本3.10.10版本下 没有layout.js文件的解决方法 页面布局设置的方法
- vue-cli脚手架build目录中的webpack.base.conf.js配置文件
- 解决:Angular-cli:执行ng-build --prod后,dist文件里无js文件、文件未压缩等问题
- vue-cli 项目打包 npm run build
- 关于vue-cli项目npm run build后,index.html无法在浏览器打开
- vue请求数据,build文件没有dev-server.js解决办法
- 学习vue-cli时需要引入外部js库文件(如jquery)的问题,百度后解决了,再次备忘一下
- 用vue-cli构建了项目之后在webstorm开发,用npm run dev跑本地服务,经常修改之后在浏览器刷新没反应,偶尔才会有刷新,需要重新跑一遍npm run dev才会更新,这是怎么回事呢?
- 详解vue-cli脚手架build目录中的dev-server.js配置文件
- npm突然找不到npm-cli.js的解决方法
- vue-cli脚手架build目录下utils.js工具配置文件详解
- 使用npm安装vue脚手架cli或者angular-cli时出错的解决方法
- Angular2 npm run build构建错误的解决方法
- vue-cli脚手架build目录中的webpack.prod.conf.js配置文件