美文网首页vue
基于Vue-cli3一些常见的优化

基于Vue-cli3一些常见的优化

作者: w候人兮猗 | 来源:发表于2019-11-19 15:07 被阅读0次

    1、配置某些包使用CDN

    主要借助的是html-webpack-plugin这个插件以及webpack externals这个属性

    • 修改vue.config.js
    // 对应的版本可以看package.json
    const cdnMap = {
        css: [],
        js: [
            'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
            'https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js',
            'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
            'https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js'
        ]
    }
    // 哪些资源
    const externals = {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        vuex: 'Vuex',
        axios: 'axios'
    }
    module.exports = {
        chainWebpack(config) {
             config.externals(externals)
              config.plugin('html')
             .tap(args => {
                args[0].cdn = cdnMap
                return args
             })
        }
        
    }
    
    • 修改index.html
      使用的ejs语法,动态遍历出配置文件中的cdn地址
      <% if (process.env.NODE_ENV === 'production') { %> <% for(var css of
      htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%=css%>" rel="preload" as="style" />
      <link rel="stylesheet" href="<%=css%>" as="style" />
      <% } %> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    

    注意:externals这个对象中,key可以取important vue from 'vue'中的这个vuevalue可以取外部文件export的文件名

    2、使用splitChunks进行代码分割

    • node_modules全部打包成chunk-libs并设置优先级为10
    • vantUI单独拆包,设置优先级为20
    • 将自己的comnponents打包成common设置优先级为5
    module.exports = {
        chainWebpack(config) {
             config.optimization.splitChunks({
                    chunks: 'all',
                    cacheGroups: {
                        libs: {
                            name: 'chunk-libs',
                            test: /[\\/]node_modules[\\/]/,
                            priority: 10,
                            chunks: 'initial' // only package third parties that are initially dependent
                        },
                        vantUI: {
                            name: 'chunk-vantUI', // split vantUI into a single package
                            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                            test: /[\\/]node_modules[\\/]_?vant(.*)/ // in order to adapt to cnpm
                        },
                        commons: {
                            name: 'chunk-commons',
                            test: resolve('src/components'), // can customize your rules
                            minChunks: 3, //  minimum common number
                            priority: 5,
                            reuseExistingChunk: true
                        }
                    }
                })
        }
    }
    

    可以看一下打包之后的资源:

    可以看出将vantnode_modules单独打包成了两个js文件

    3.UglifyjsWebpackPlugin压缩代码

    可以自行根据环境判断是否需要压缩代码

    module.exports = {
        chainWebpack(config) {
             config.optimization.minimizer = [
                    new UglifyjsWebpackPlugin({
                        // 生产环境推荐关闭 sourcemap 防止源码泄漏
                        // 服务端通过前端发送的行列,根据 sourcemap 转为源文件位置
                        sourceMap: IS_DEV,
                        uglifyOptions: {
                            warnings: false,
                            compress: {
                                drop_console: true,
                                drop_debugger: true
                            }
                        }
                    })
                ]
        }
    }
    

    4、开启GZIP优化

    主要借助compression-webpack-plugin插件
    服务端也要做修改,如果服务端支持GZIP,就发送gzip文件

    module.exports = {
        chainWebpack(config) {
             config
                    .plugin('compression')
                    .use(CompressionWebpackPlugin)
                    .tap(() => [
                        {
                            test: /\.js$|\.html$|\.css/, // 匹配文件名
                            threshold: 10240, // 超过10k进行压缩
                            deleteOriginalAssets: false // 是否删除源文件
                        }
                    ])
        }
    }
    

    5、路由懒加载

    将原先静态引入路由修改为动态引入

    import Home from '@/view/Home'
    
    routes:[{
        path:'/home',
        component:Home
    }]
    
    修改为
    
    routes:[{
        path:'/home',
        component:()=>import('@/view/Home)
    }]
    
    • 路由组件按组分快打包(见官网)
    const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
    const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
    const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
    

    6.CSS是否分离

    主要是借助ExtractTextPlugin插件

    module.exports = {
        css: {
            // 是否使用css分离插件 ExtractTextPlugin
            extract: false,
            modules: false,
            sourceMap: IS_DEV,
            loaderOptions: {
                less: {}
            }
        }
    }
    

    为什么要CSS分离,开启CSS分离之后每个组件的css会单独打包,造成页面上有大量请求,所以在正式环境中将CSS分离关闭

    关于

    这是我在最新的一个项目搭建中遇到的一些优化的点,后期如果还有继续加以补充
    完整代码可以看我的项目https://github.com/ahwgs/fast_h5_vue

    本文首发于基于Vue-cli3一些常见的优化

    相关文章

      网友评论

        本文标题:基于Vue-cli3一些常见的优化

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