Vue Cli3 项目打包优化

柔情只为你懂 2023-06-16 12:53 20阅读 0赞

# 一、新建项目 #

使用 `vue-cli3` 构建一个初始的Vue项目：[Cli3 官方文档][Cli3]

> 因为使用了cli3，很多目录结构不见了，而相关配置是放在`vue.config.js`里面的，因此在根目录，新建一个`vue.config.js`

module.exports = {}

# 二、正式优化 #

## 1、将 productionSourceMap 设为 false ##

(1) 在`vue.config.js`中`module.exports`写入：

module.exports = {
        productionSourceMap: false
    }

## 2、图片压缩 ##

> vue正常打包之后一些图片文件很大，使打包体积很大，通过[image-webpack-loader][]插件可将大的图片进行压缩从而缩小打包体积

(1) 先安装依赖：`cnpm install image-webpack-loader --save-dev`  
(2) 在`vue.config.js`中`module.exports`写入：

module.exports = {
        productionSourceMap: false,
        chainWebpack: config => {
            // ============压缩图片 start============
            config.module
                .rule('images')
                .use('image-webpack-loader')
                .loader('image-webpack-loader')
                .options({ bypassOnDebug: true })
                .end()
            // ============压缩图片 end============
        }
    }

# 3、cdn配置（可选） #

(1) 在`vue.config.js` 最上边写入：

(2) 在`vue.config.js` `module.exports` `chainWebpack`中写入：

// ============注入cdn start============
    config.plugin('html').tap(args => {
        // 生产环境或本地需要cdn时，才注入cdn
        if (isProduction || devNeedCdn) args[0].cdn = cdn
        return args
    })
    // ============注入cdn start============

(3) 在`vue.config.js` `module.exports` `configureWebpack`中写入：

configureWebpack: config => {
        // 用cdn方式引入，则构建时要忽略相关资源
        if (isProduction || devNeedCdn) config.externals = cdn.externals
    }

(4) 当前配置的`vue.config.js`

// 是否为生产环境
    const isProduction = process.env.NODE_ENV !== 'development'
    
    // 本地环境是否需要使用cdn
    const devNeedCdn = false
    
    // cdn链接
    const cdn = {
        // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
        externals: {
            vue: 'Vue',
            vuex: 'Vuex',
            'vue-router': 'VueRouter'
        },
        // cdn的css链接
        css: [],
        // cdn的js链接
        js: [
            'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
            'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
            'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js'
        ]
    }
    
    module.exports = {
        productionSourceMap: false,
        chainWebpack: config => {
            // ============压缩图片 start============
            config.module
                .rule('images')
                .use('image-webpack-loader')
                .loader('image-webpack-loader')
                .options({ bypassOnDebug: true })
                .end()
            // ============压缩图片 end============
    
            // ============注入cdn start============
            config.plugin('html').tap(args => {
                // 生产环境或本地需要cdn时，才注入cdn
                if (isProduction || devNeedCdn) args[0].cdn = cdn
                return args
            })
            // ============注入cdn start============
        },
        configureWebpack: config => {
            // 用cdn方式引入，则构建时要忽略相关资源
            if (isProduction || devNeedCdn) config.externals = cdn.externals
        }
    }

(5) 在`public` `index.html` 写入

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width,initial-scale=1.0" />
            <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
            
            <% for (var i in htmlWebpackPlugin.options.cdn &&
            htmlWebpackPlugin.options.cdn.css) { %>
            <link
                href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
                rel="stylesheet"
            />
            <% } %>
            
            <title>cli3_base</title>
        </head>
        <body>
            <noscript>
                <strong
                    >We're sorry but cli3_base doesn't work properly without
                    JavaScript enabled. Please enable it to continue.</strong
                >
            </noscript>
            <div id="app"></div>
    
            
            <% for (var i in htmlWebpackPlugin.options.cdn &&
            htmlWebpackPlugin.options.cdn.js) { %>
            <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
            <% } %>
            
    
            
        </body>
    </html>

(6) 重启项目`npm run serve`  
(7) 在`src/router.js`修改  
将

Vue.use(Router)

改为

if (!window.VueRouter) Vue.use(Router)

(8) 重新启动`npm run serve`即可，现在的配置是开发环境，在浏览器的`Network JS`里面是看不到的。若想查看，请将`vue.config.js`里面的

// 本地环境是否需要使用cdn
    const devNeedCdn = false

改为

// 本地环境是否需要使用cdn
    const devNeedCdn = true

然后再次重启`npm run serve`，然后浏览器查看`Network JS`

![format_png][]

Network JS

# 4、代码压缩 #

(1) 安装依赖：`cnpm i -D uglifyjs-webpack-plugin`  
(2) 在`vue.config.js` 最上边引入依赖

// 代码压缩
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

(3) 在`vue.config.js` `module.exports` `configureWebpack` 里面新增

// 生产环境相关配置
    if (isProduction) {
        // 代码压缩
        config.plugins.push(
            new UglifyJsPlugin({
                uglifyOptions: {
                    //生产环境自动删除console
                    compress: {
                        warnings: false, // 若打包错误，则注释这行
                        drop_debugger: true,
                        drop_console: true,
                        pure_funcs: ['console.log']
                    }
                },
                sourceMap: false,
                parallel: true
            })
        )
    }

# 5、开启Gzip #

(1) 安装依赖：`cnpm install --save-dev compression-webpack-plugin`  
(2) 在`vue.config.js` 顶部引入依赖

// gzip压缩
    const CompressionWebpackPlugin = require('compression-webpack-plugin')

(3) 在`vue.config.js` `module.exports` `configureWebpack` 里面新增，直接放在`代码压缩`下边即可

// 生产环境相关配置
    if (isProduction) {
        // 代码压缩
        // ..................
        // gzip压缩
        const productionGzipExtensions = ['html', 'js', 'css']
        config.plugins.push(
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' + productionGzipExtensions.join('|') + ')$'
                ),
                threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                deleteOriginalAssets: false // 删除原文件
            })
        )
    }

# 6、公共代码抽离 #

(1) 在`vue.config.js` `module.exports` `configureWebpack` 里面新增，直接放在`gzip压缩`下边即可

// 公共代码抽离
    config.optimization = {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    chunks: 'all',
                    test: /node_modules/,
                    name: 'vendor',
                    minChunks: 1,
                    maxInitialRequests: 5,
                    minSize: 0,
                    priority: 100
                },
                common: {
                    chunks: 'all',
                    test: /[\\/]src[\\/]js[\\/]/,
                    name: 'common',
                    minChunks: 2,
                    maxInitialRequests: 5,
                    minSize: 0,
                    priority: 60
                },
                styles: {
                    name: 'styles',
                    test: /\.(sa|sc|c)ss$/,
                    chunks: 'all',
                    enforce: true
                },
                runtimeChunk: {
                    name: 'manifest'
                }
            }
        }
    }

完整的`vue.config.js`

// 代码压缩
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    
    // gzip压缩
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    // 是否为生产环境
    const isProduction = process.env.NODE_ENV !== 'development'
    
    // 本地环境是否需要使用cdn
    const devNeedCdn = true
    
    // cdn链接
    const cdn = {
        // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
        externals: {
            vue: 'Vue',
            vuex: 'Vuex',
            'vue-router': 'VueRouter'
        },
        // cdn的css链接
        css: [],
        // cdn的js链接
        js: [
            'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
            'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
            'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js'
        ]
    }
    
    module.exports = {
        productionSourceMap: false,
        chainWebpack: config => {
            // ============压缩图片 start============
            config.module
                .rule('images')
                .use('image-webpack-loader')
                .loader('image-webpack-loader')
                .options({ bypassOnDebug: true })
                .end()
            // ============压缩图片 end============
    
            // ============注入cdn start============
            config.plugin('html').tap(args => {
                // 生产环境或本地需要cdn时，才注入cdn
                if (isProduction || devNeedCdn) args[0].cdn = cdn
                return args
            })
            // ============注入cdn start============
        },
        configureWebpack: config => {
            // 用cdn方式引入，则构建时要忽略相关资源
            if (isProduction || devNeedCdn) config.externals = cdn.externals
    
            // 生产环境相关配置
            if (isProduction) {
                // 代码压缩
                config.plugins.push(
                    new UglifyJsPlugin({
                        uglifyOptions: {
                            //生产环境自动删除console
                            compress: {
                                warnings: false, // 若打包错误，则注释这行
                                drop_debugger: true,
                                drop_console: true,
                                pure_funcs: ['console.log']
                            }
                        },
                        sourceMap: false,
                        parallel: true
                    })
                )
    
                // gzip压缩
                const productionGzipExtensions = ['html', 'js', 'css']
                config.plugins.push(
                    new CompressionWebpackPlugin({
                        filename: '[path].gz[query]',
                        algorithm: 'gzip',
                        test: new RegExp(
                            '\\.(' + productionGzipExtensions.join('|') + ')$'
                        ),
                        threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                        deleteOriginalAssets: false // 删除原文件
                    })
                )
    
                // 公共代码抽离
                config.optimization = {
                    splitChunks: {
                        cacheGroups: {
                            vendor: {
                                chunks: 'all',
                                test: /node_modules/,
                                name: 'vendor',
                                minChunks: 1,
                                maxInitialRequests: 5,
                                minSize: 0,
                                priority: 100
                            },
                            common: {
                                chunks: 'all',
                                test: /[\\/]src[\\/]js[\\/]/,
                                name: 'common',
                                minChunks: 2,
                                maxInitialRequests: 5,
                                minSize: 0,
                                priority: 60
                            },
                            styles: {
                                name: 'styles',
                                test: /\.(sa|sc|c)ss$/,
                                chunks: 'all',
                                enforce: true
                            },
                            runtimeChunk: {
                                name: 'manifest'
                            }
                        }
                    }
                }
            }
        }
    }

[完成的 cli3\_base 模板][cli3_base]

[Vue Cli3 项目配置][Vue Cli3]

作者：MrHzq  
链接：https://www.jianshu.com/p/476387c7fea3  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[Cli3]: https://links.jianshu.com/go?to=https%3A%2F%2Fcli.vuejs.org%2Fzh%2Fconfig%2F
[image-webpack-loader]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fimage-webpack-loader
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy84ODk3NjUxLWVmNTg5MTM1ZmNjYTMzNWEucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTEyOC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[cli3_base]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FMrHzq%2Fcli3_base
[Vue Cli3]: https://www.jianshu.com/p/4b23dc05ae36