vue-cli 3.0 项目打包体积优化
日期: 2019-03-14 浏览量: 4953
简单介绍小 vue-cli 3.x 线上打包体积优化方法。
1. 使用webpack 压缩插件,打包时项目进行压缩 (插件:compression-webpack-plugin),配置方法:
在vue.config.js配置文件中添加配置:
configureWebpack: config => { const myConfig = {} myConfig.plugins= [ new CompressionWebpackPlugin({ test: /\.js$|\.html$|\.css/, threshold: 10240, deleteOriginalAssets: true, }) ]; return myConfig; },
注意文件会压缩成 .gz 文件, 需要服务器端支持,nginx 需要开启对应的支持, 配置如下
gzip on; gzip_static on; gzip_min_length 1024; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml; gzip_vary off; gzip_disable "MSIE [1-6]\.";
2. 将使用的包,用cdn方式引入, 例如将vue用cdn方式引入页面:
在public/index.html添加引入js文件
<script src="https://unpkg.com/vue@2.5.16/dist/vue.runtime.min.js"></script> <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script> <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script>
在vue.config.js文件中添加配置
configureWebpack: config => { const myConfig = {} myConfig.plugins= [ new CompressionWebpackPlugin({ test: /\.js$|\.html$|\.css/, threshold: 10240, deleteOriginalAssets: true, }) ]; myConfig.externals= { vue: "Vue", vuex: "Vuex", "vue-router": "VueRouter", "element-ui": "ELEMENT" } return myConfig; },
优化后体积会缩小百分之80左右, 还是很不错的
人活着,其实就是一种心态,你若觉得快乐,幸福无处不在;你为自己悲鸣,世界必将灰暗。
阅读排行
最新文章
联系方式
- 邮箱:m18811126599@163.com
- QQ:896956692