小编给大家分享一下Vue项目打包优化的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！使用vue-cli部署生产包时，发现
小编给大家分享一下Vue项目打包优化的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
使用vue-cli部署生产包时，发现资源包很大，打包后的vendor.js达到了1.4M，这已经很大了，而且会影响到首屏加载。那么，怎么优化呢？
1.组件按需加载
这是首先可以优化的点。如果频繁使用了第三方组件/UI库，如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库，如果全部引入，项目体积非常大，这时可以按需引入组件。
示例如下：
1.1 element-ui
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D然后，将.babelrc 修改为：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}然后引入部分组件，这样一来，就不需要引入样式了，插件会帮我们处理。
// main.js
import Vue from 'vue'
import { Dialog, Loading } from 'element-ui'
Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然后正常使用组件1.2 mint-ui
由于mint-ui是element-ui的移动端组件，所以它的使用和引入几乎和element-ui一样。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D然后，将.babelrc 修改为：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}然后引入部分组件
// main.js
import Vue from 'vue'
import { Toast, MessageBox } from 'element-ui'
Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然后正常使用组件注意，element-ui和mint-ui不能同时在.babelrc中进行插件设置，这种情况下，依然可以按需引入，但是不要在.babelrc中配置，在引入的地方同时引入CSS即可。
1.3 echarts
首先安装babel-plugin-equire
npm i babel-plugin-equire -D然后，在.babelrc文件中添加该插件
{
"plugins": [
// other plugins
...
"equire"
]
}创建一个js文件
// echarts.js
// eslint-disable-next-line
const echarts = equire([
'tooltip',
'candlestick',
'bar',
'line',
'axisPointer',
'legend',
'grid'
])
export default echarts
// 业务组件，引入echarts
import echarts from '@/assets/lib/echarts'
// 使用与以前一样按需加载echarts
解决vue-cli首屏加载慢的问题
2.路由懒加载
这里需要一个插件
vue-router官方推荐syntax-dynamic-import插件，不过它要求同时安装@bable/core^7.0.0，如果你安装了babel-core6，是会有版本冲突的。我的做法如下
npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)// router.js
const login = () => import('@/components/login')
const router = new VueRouter({
routes: [
{ path: '/login', component: login }
]
})还有一种魔法注释用法
有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 webpack > 2.4)。
const Foo = () => import( './Foo.vue')3.异步组件
如果组件在页面加载时不需要，只在调用时用到，这时可以使用异步组件的写法。仅仅是引入和组件注册写法不同
// template
<test v-if="showTest"></test>
// script
components: {
test: () => import('./test') // 将组件异步引入，告诉WEBpack，将该部分代码分割打包
},
methods:{
clickTest () {
this.showTest = !this.showTest
}
}4.图片的压缩合并
无损压缩图片：https://www.jb51.net/softs/605425.html
如有可能，将图片制作成精灵图
5.CDN加速
在index.html中引入cdn资源
...
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
<script src="Https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</body>
...修改 build/webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex',
'vue-resource': 'VueResource'
},
...
}修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource
// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)6.压缩代码
vue-cli已经使用UglifyJsPlugin 插件来压缩代码，可以设置成如下配置：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
pure_funcs: ['console.log']
},
sourceMap: false
})其中sourceMap: false是禁用除错功能。
如果设为true，在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好，但会大大增加整体资源包的体积，所以将其禁用。
以上是“vue项目打包优化的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网html频道！
--结束END--
本文标题: vue项目打包优化的示例分析
本文链接: https://www.lsjlt.com/news/71970.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0