vue项目的编译优化和打包优化是一个不可避免的问题,下面是小记录。
1.在生产环境中,我们路由中的组件引用方式应该是 import
(module.exports = file => () => import('@/pages/' + file + '.vue') )
在开发过程中,我们的组件引用方式应该用require (module.exports = file => require('@/pages/' + file + '.vue').default ) ->首屏加载速度变快很多,但是体积变大
路由中的引用方式应该是这样 const _import = require('./_import_' + process.env.NODE_ENV) -> 主要取决于环境是dev还是pro
// component: resolve => require(['@/components/HelloWorld'], resolve)
2.在prod.config.js 中把sourceMap选项设置为false。这里建议去了解一下关于sourceMap的作用
3.用工具压缩css
4.不建议的方式
<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
目前本人只收集了这么些,有补充请发本人邮箱 15158614067@163.com
***在引用组件的时候,按需引用 像这样 import Button from 'vue-weui/components/button/button.vue';
2018-02-06-------------------------------------------------------------------------------------------------------------记录
下面是一个项目编译加速的插件。。。。。一闪一闪亮晶晶,亮瞎我的眼,直接看下面
首先 : cnpm i webpack-parallel-uglify-plugin -D
new ParallelUglifyPlugin({ cacheDir: '.cache/', uglifyJS:{ output: { comments: false }, compress: { warnings: false } } }),