vue-cli3打包

最近通过vue-cli3配置项目的时候，对于引入的ElementUI或者测试使用的jQuery等第三方包，存在打包之后，app.js文件过大的问题。解决的方案目前看来存在两种方式。

在vue-cli3不存在暴露的接口文件，需要通过vue.config.js配置来使用,展示的均为vue-cli3。vue-cli2类似，区别在于可在暴露的配置文件中直接添加。

webpack-bundle-analyzer

用于显示打包之后的文件分析其大小.

安装npm install –save-dev webpack-bundle-analyzer

// vue.config.js文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    // configureWebpack返回一个对象，会被 webpack-merge合并最终配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            return {
                plugins: [
                    new BundleAnalyzerPlugin(
                        //  可以是`server`，`static`或`disabled`。
                        //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
                        //  在“静态”模式下，会生成带有报告的单个HTML文件。
                        //  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
                        analyzerMode: 'server',
                        //  将在“服务器”模式下使用的主机启动HTTP服务器。
                        analyzerHost: '127.0.0.1',
                        //  将在“服务器”模式下使用的端口启动HTTP服务器。
                        analyzerPort: 8888,
                        //  路径捆绑，将在`static`模式下生成的报告文件。
                        //  相对于捆绑输出目录。
                        reportFilename: 'report.html',
                        //  模块大小默认显示在报告中。
                        //  应该是`stat`，`parsed`或者`gzip`中的一个。
                        //  有关更多信息，请参见“定义”一节。
                        defaultSizes: 'parsed',
                        //  在默认浏览器中自动打开报告
                        openAnalyzer: true,
                        //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
                        generateStatsFile: false,
                        //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
                        //  相对于捆绑输出目录。
                        statsFilename: 'stats.json',
                        //  stats.toJson（）方法的选项。
                        //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。
                        //  在这里查看更多选项：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
                        statsOptions: null,
                        logLevel: 'info' //日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
                    )
                ]
            }
        } else {
            // 为开发环境修改配置...
        }
    }
}

默认在打包或者运行server时，接口8888为图像界面。

通过externals

webpack文档https://webpack.docschina.org/configuration/externals有简单的介绍。
简单来说就是

1.添加cdn

在模板页面index.html中添加CDN链接，举例jQuery。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

2.设置externals

// vue.config.js文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            return {
                plugins: [
                    new BundleAnalyzerPlugin()
                ],
                externals:{
                    'jquery': 'jQuery'
                }
            }
        } else {
            // 为开发环境修改配置...
        }
    }
}

3.关于开发时引用

可以通过下面代码引用，此时（上例设置为生产环境时）不会被webpack打包。同时可以引用使用。

import $ from 'jquery';

通过splitChunks

上一种方式是通过cdn加速，这种是通过拆分Chunk的方式。
webpac中文文档地址https://webpack.docschina.org/plugins/split-chunks-plugin/，webpack4默认删除CommonsChunkPlugin。直接上代码

// vue.config.js文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            return {
                optimization:{
                    splitChunks:{
                        cacheGroups: {
                            libs: {
                                name: "chunk-libs",// 只打包初始时依赖的第三方
                                test: /[\\/]node_modules[\\/]/,
                                priority: 10,
                                chunks: "initial"
                            },
                            elementUI: {
                                name: "chunk-elementUI", // 单独将 elementUI 拆包
                                priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
                                test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                                chunks: "all"
                            }
                        }
                    },
                    runtimeChunk: true
                    },
            }
        } else {
            // 为开发环境修改配置...
        }
    }
}

参考链接
vue-cli2参考https://blog.csdn.net/LY_never_cease/article/details/81333093