目标：打出的包体积更小！

1.先分析一下打出的包到底什么占空间

安装分析插件

1
yarn add webpack-bundle-analyzer -D

在vue.config.js中添加配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
    chainWebpack: (config) => {
        /* 添加分析工具*/
        if (process.env.NODE_ENV === 'production') {
            if (process.env.npm_config_report) {
                config
                    .plugin('webpack-bundle-analyzer')
                    .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                    .end();
                config.plugins.delete('prefetch')
            }
        }
    },
}

执行命令

1
npm run build --report

image.png

image.png

从图中可以看到打出的每个js体积有多大，每个js都是由什么依赖组成的，搞清楚是什么占体积后就可以对症下药了。好家伙，一个chunk-vendors.js 1.45M，其中element-plus 占六七百k，chunk-vendors过大就会导致首屏加载很慢。我准备先把element-plus引入方式改为cdn引入的形式来优化一下。

2.cdn 引入 element-plus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = {
    chainWebpack: (config) => {
        /* 添加分析工具*/
        if (process.env.NODE_ENV === 'production') {
            if (process.env.npm_config_report) {
                config
                    .plugin('webpack-bundle-analyzer')
                    .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                    .end();
                config.plugins.delete('prefetch')
            }
            var externals = {
                // CDN 的 Element-plus 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
                'vue': 'Vue',
                // 属性名称 element-plus, 表示遇到 import xxx from 'element-plus' 这类引入 'element-plus'的，
                // 不去 node_modules 中找，而是去找 全局变量 ElementPlus
                'element-plus': 'ElementPlus'
            }
            config.externals(externals)
        }
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <!-- 引入element-plus的样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.1.9/dist/index.css" />
    
</head>

<body>
    <div id="app"></div>
    <!-- 引入vue element-plus并锁定版本 -->
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus@2.1.9/dist/index.full.js"></script>
</body>

3.打出的js不要map

1
2
3
module.exports = {
    productionSourceMap: false,
}

做完以上操作后，chunk-vendors.js减小到九十多k