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

w候人兮猗

发布于 2020-07-01 16:46:07

1.6K0

发布于 2020-07-01 16:46:07

文章被收录于专栏：w候人兮猗的博客w候人兮猗的博客

Contents

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'中的这个vue，value可以取外部文件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
                    }
                }
            })
    }
}

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

可以看出将vant与node_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分离关闭