vue项目打包优化

通过splitChunks拆包

拆包的目的

• 能够以并行加载js和css
• 能够提取公共的js避免多个包中包含重复的js

const path = require("path");
const apiMocker = require("mocker-api")

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: `
                    @import "@/assets/styles/global/_index.scss";
                    @import "@/assets/styles/project/settings/_var.scss";
                `
            }
        }
    },
    configureWebpack: config => {
        config.optimization = {
            splitChunks: {
                chunks: 'all',
                cacheGroups: {
                    'vue-group': {
                        name: 'vue-group',
                        test: /([\\/]node_modules[\\/]vue[\\/]|[\\/]node_modules[\\/]vuex[\\/]|[\\/]node_modules[\\/]vue-router[\\/])/,
                        chunks: 'all',
                        priority: 10
                    },
                    'element-ui': {
                        name: 'element-ui',
                        test: /[\\/]node_modules[\\/]element-ui[\\/]/,