vue/cli3 项目大小优化

vue路由懒加载

按需加载一定要规范好css！！！

vue/cli3官网示例
把组件按组分块

把
import school from '@/views/school.vue'
换成
const school= () => import('@/views/school.vue')

这样就会每一个组件就会对应生成一个js文件，按需加载

此外，还需要在vue.config.js中配置

// 去除插件
    chainWebpack(config) {
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')
    },

其他

去掉.map文件

vue.config.js中配置

//不生成.map文件
    productionSourceMap: false,

分析文件大小来源

安装 webpack-bundle-analyzer 插件

安装完成后直接在vue.config.js中添加

chainWebpack(config) {
        // 对应package里的判断条件
        if (process.env.npm_config_report) {
            config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        }

    }

在package.json中添加

"analyze": "npm_config_report=true npm run build",

这里的npm_config_report对应process.env.npm_config_report的判断，只有执行npm run analyze时才生成分析结果

本以为到这里就结束了可以运行了，但是不巧。。。报错了

查了一下资料知道，以上合并两条命令（这种操作在powershell中不被支持，在cmd中也不被支持，这是Mac中bash或Linux的shell中的独特操作，拆分脚本如下：

"analyze": "set npm_config_report=true && npm run build",

运行成功

展示编译后的文件大小及各部分内容大小。以下是项目在优化前的分析结果：

第三方库懒加载

把第三方库放到单独一个组件里也可以实现按需加载

ssr服务器端渲染

vue的gzip压缩

压缩之后体积将大大缩小，右边箭头是压缩后的体积

使用webpack插件 compression-webpack-plugin

在 vue.config.js中配置

const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 启动gzip压缩
    configureWebpack: config => {
        // 开发环境不需要gzip
        if (process.env.NODE_ENV !== 'production') return
        config.plugins.push(
            new CompressionWebpackPlugin({
                // 正在匹配需要压缩的文件后缀
                test: /\.(js|css|svg|woff|ttf|json|html)$/,
                // 大于10kb的会压缩
                threshold: 10240
            })
        )
    }

运行build就会得到压缩后的.gz文件了

配置全局css变量

使用scss时，配置全局css变量

vue.config.js中配置

css: {
        loaderOptions: {
            sass: {
                data: `
              @import "@/assets/scss/style.scss";
            `
            }
        }
    },

配置之后可在所有vue文件中使用scss变量
可用于更换不同主题