优化webpack和vuecli3时候的注意

1.开启图片压缩 image-webpack-loader
如果项目使用了svg-sprite-loader，svg雪碧图，规则配置了.text(svg)svg类型，那会影响svg雪碧图显示

2.开启js/css压缩 compression-webpack-plugin
除了在vue.config设置，相呼应的服务器ngix也要开启 在server里开启gzip_stacgic：on
（注意，ngix需要有对应模块依赖，没有的话先安装）

3.路由懒加载，vue.config需要设置

config.plugins.delete('prefetch');

4.cssOptions = {
extract: true, // 是否使用css分离插件 ExtractTextPlugin
为true的时候，改变css不能热更新，解决方法：判断当前环境生产模式为true，开发为false

5.一些资源包太大利用csdn方式

const cdn = {
    // 开发环境
    dev: {
        css: [
            'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
        ],
        js: []
    },
    // 生产环境
    build: {
        css: [
            'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
        ],
        js: [
            'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js',
            'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
            'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
            'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',
            'https://unpkg.com/element-ui/lib/index.js'
        ]
    }
};

config.plugin('html').tap(args => {
            if (process.env.NODE_ENV === 'production') {
                args[0].cdn = cdn.build;
            }
            if (process.env.NODE_ENV === 'development') {
                args[0].cdn = cdn.dev;
            }
            return args;
        });