码迷,mamicode.com
首页 > Web开发 > 详细

Vue项目使用Webpack打包体积优化

时间:2020-01-20 00:13:41      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:lse   extern   zip   pre   ios   lan   tps   webp   https   

使用Vue开发的项目在用Webpack打包之后vender和app这两个js文件可能很大,而且有很多的map文件,其体积也不小,那么如何优化打包后体积呢?

引入CDN

在webpack.base.conf.js文件中添加打包排除项:

externals: {
    ‘vue‘: ‘Vue‘,
    ‘echarts‘: ‘echarts‘,
    ‘axios‘: ‘axios‘,
    ‘vuex‘: ‘Vuex‘
  },

然后去掉main.js中的导入,在index.html添加BootCDN的链接:

 <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

关闭SourceMap生成

在config/index.js中设置:

cssSourceMap: false,
productionSourceMap: false,
productionGzip: true,

路由懒加载

component: (resolve) => require([‘../components/Index.vue‘], resolve)

Vue项目使用Webpack打包体积优化

标签:lse   extern   zip   pre   ios   lan   tps   webp   https   

原文地址:https://blog.51cto.com/xvjunjie/2467879

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!