ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

一篇关于vue-cli3打包优化的文章

2021-04-16 20:59:57  阅读:156  来源: 互联网

标签:vue const cli3 cdn js webpack resolve config 打包


在开发过程中vue项目打包是需要做一些性能优化的,这里写了关于我知道的要做的优化的部分,废话不多说直接上代码了,仅供参考 欢迎提出意见

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')
// 开启Gzip需要的依赖 yarn add compression-webpack-plugin -D
const CompressionWebpackPlugin = require('compression-webpack-plugin')
function resolve(dir) {
    return path.join(__dirname, dir)
}
// 标记是否是生产环境
const isPruction = process.env.NODE_ENV === "production" 
const devNeedCdn = false // 标记本地是否需要cdn引入
// cdn配置
// CDN的本质上是将媒体资源,动静态图片(Flash),HTML,CSS,JS等等内容缓存到距离你更近的IDC,
// 从而让用户进行共享资源,实现缩减站点间的响应时间等等需求,而网游加速器的本质则是通过建立高带宽机房,
// 架设多节点服务器来为用户进行加速。我们可以将一些大体积的模块,让cdn帮我们提供相应的资源,
// 这样就可以缓解我们自己的服务器的压力,同时提供更快更好的资源响应

const cdn = {
    // 模块名称和作用域名(对应的是window里面的全局变量名)
    external: {
        vuex: 'Vuex',
        'vue-router': 'VueRouter'
    },
    //cdn的css链接
    css: [],
    //cdn的js连接 这里的资源地址请根据自己的连接
    js: [
        'https://cdn.staticfile.org/vuex/3.0.2/vuex.min.js', 
        'https://cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js'
    ]
}
module.exports = {
    // devServer : {
    //     proxy: 'localhost:8080'
    // },
    productionSourceMap: false, // 上线后不生成map文件
    chainWebpack: (config) => {
        // 配置路径别名
        config.resolve.alias
        .set('@', resolve('src'))
        .set('components', resolve('src/components'))
        .set('assets', resolve('src/assets'))
        .set('api', resolve('src/api'))
        .set('views', resolve('src/views'))
        // 上线压缩图片 首先要安装 image-webpack-loader 命令 yarn add image-webpack-loader -D
        config.module.rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({bypassOnDebug:true})
        .end()

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

    configureWebpack: config => {
        // 用cdn方式引入,则构建时要忽略相关资源
        if (isPruction || devNeedCdn) {
            config.externals = cdn.externals
        } 
        if(isPruction) { // 判断是否是生产环境
            config.mode = "production";
            // 上线关闭console和debugger
            // 代码压缩
            config.optimization.minimizer = [
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            warnings: false, // 如果打包产生错误 可注释掉这里
                            drop_console: true,
                            drop_debugger: true,
                            pure_funcs: ['console.log']
                        }
                    }
                })
            ]
            // 打包文件大小配置
            config["performance"] = {
                "maxEntrypointSize": 10000000, // 此选项根据入口起点的最大体积,控制 webpack 何时生成性能提示 单位是(bytes)
                "maxAssetSize": 3000000 // 此选项根据单个资源体积,控制 webpack 何时生成性能提示 单位是(bytes)
            }

            // gzip压缩
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push({
                filename:'[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp( // 进行压缩的文件类型
                    '\\.(' + productionGzipExtensions.join('|') + ')$'
                ),
                threshold: 10240, // 定义只有大小大于该值的资源会被处理
                minRatio: 0.7, // 只有压缩率小于这个值的资源被处理
                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'
                    }
                }
            }
        } else {
            config.mode = 'development'
        }
    }
}

cdn配置如果添加了那么html文件也要做相应的修改,这里是修改后的html文件

	<!DOCTYPE html>
<html lang="">
  <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">
    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link
        href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
        rel="stylesheet"
    />
    <% } %>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
     <!-- 使用CDN的JS文件 -->
     <% for (var i in htmlWebpackPlugin.options.cdn &&
     htmlWebpackPlugin.options.cdn.js) { %>
     <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
     <% } %>
  </body>
</html>


标签:vue,const,cli3,cdn,js,webpack,resolve,config,打包
来源: https://blog.csdn.net/mutoouren123/article/details/115771385

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有