美文网首页前端攻略让前端飞Vue
前端架构师必备之Vue项目打包优化

前端架构师必备之Vue项目打包优化

作者: 880d91446f17 | 来源:发表于2018-11-10 16:15 被阅读11次

    前几天听老师讲过前端架构师必备之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(/* webpackChunkName: "group-foo" */ './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文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好,但会大大增加整体资源包的体积,所以将其禁用。

    以上就是本文的全部内容,希望对大家的学习有所帮助,

    本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
    对web开发技术感兴趣的同学,欢迎加入Q群:582735936,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
    最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。
    需要vue项目打包优化视频资料的可以加我

    QQ图片20181026133527.jpg

    相关文章

      网友评论

        本文标题:前端架构师必备之Vue项目打包优化

        本文链接:https://www.haomeiwen.com/subject/eqgzxqtx.html