Vue-cli4x项目优化实践

已于 2022-03-16 17:11:49 修改
阅读量816 收藏
点赞数 1
分类专栏： vue 配置 vue 项目 文章标签： vue js
于 2020-12-05 13:28:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36529240/article/details/110678680
版权

1.关闭productionSourceMap

最新件脚手架不自带配置文件
先在根目录新建vue.config.js文件，在vue.config.js中写入如下内容：

module.exports = {
    productionSourceMap: false
}

2.开启Gzip压缩

安装插件compression-webpack-plugin。这个插件必须配合后台，服务器上nginx也必须开启gzip才能生效

npm install --save-dev compression-webpack-plugin

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';

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

3.开启CDN加速（有可能cdn会挂掉，也可以不配置这选项）

// 本地环境是否需要使用cdn
const devNeedCdn = false
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';
// cdn链接
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
    vue: "Vue",
    vuex: "Vuex",
    "vue-router": "VueRouter",
    axios: "axios",
    vant: "vant",
  },
  //
  // cdn的css链接
  css: ["https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"],
  // cdn的js链接
  js: [
    "https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js",
    "https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js",
    "https://cdn.jsdelivr.net/npm/vue-router@3.4.9/dist/vue-router.min.js",
    "https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js",
    "https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js",
  ],
};

module.exports = {
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            // 生产环境或本地需要cdn时，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        
    },
    configureWebpack: config => {
        // 用cdn方式引入，则构建时要忽略相关资源
        if (isProduction || devNeedCdn) config.externals = cdn.externals
    }
}

然后在index.html中引入使用了CDN的链接（使用了loading动画，刷新时不会出现空白加载）

<html lang="en" style="width: 100%;height: 100%;">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <style>
		#vue-loading{
      background-color: #fff;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 99999;
      margin-top: 0px;
      top: 0px;
    }
    #loading-center{
      width: 100%;
      height: 100%;
      position: relative;
      }
    #loading-center-absolute {
      position: absolute;
      left: 50%;
      top: 50%;
      height: 150px;
      width: 150px;
      margin-top: -75px;
      margin-left: -75px;	
      -ms-transform: rotate(45deg); 
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg); 
    }
    .object{
      width: 20px;
      height: 20px;
      background-color:#eb8819;
      position: absolute;
      left: 65px;
      top: 65px;
      }
    .object:nth-child(2n+0) {
      margin-right: 0px;
    }
    #object_one {
      -webkit-animation: object_one 2s infinite;
      animation: object_one 2s infinite;
      -webkit-animation-delay: 0.2s; 
        animation-delay: 0.2s; 
      }
    #object_two {
      -webkit-animation: object_two 2s infinite;
      animation: object_two 2s infinite;
      -webkit-animation-delay: 0.3s; 
        animation-delay: 0.3s; 
      }
    #object_three {
      -webkit-animation: object_three 2s infinite;
      animation: object_three 2s infinite;
      -webkit-animation-delay: 0.4s; 
        animation-delay: 0.4s; 
      }
    #object_four {
      -webkit-animation: object_four 2s infinite;
      animation: object_four 2s infinite;
      -webkit-animation-delay: 0.5s; 
        animation-delay: 0.5s; 
    }
    #object_five {
      -webkit-animation: object_five 2s infinite;
      animation: object_five 2s infinite;
      -webkit-animation-delay: 0.6s; 
        animation-delay: 0.6s; 
    }
    #object_six {
      -webkit-animation: object_six 2s infinite;
      animation: object_six 2s infinite;
      -webkit-animation-delay: 0.7s; 
        animation-delay: 0.7s; 
    }
    #object_seven {
      -webkit-animation: object_seven 2s infinite;
      animation: object_seven 2s infinite;
      -webkit-animation-delay: 0.8s; 
        animation-delay: 0.8s; 
    }
    #object_eight {
      -webkit-animation: object_eight 2s infinite;
      animation: object_eight 2s infinite;
      -webkit-animation-delay: 0.9s; 
        animation-delay: 0.9s; 
    }
    #object_big{
      position: absolute;
      width: 50px;
      height: 50px;
      left: 50px;
      top: 50px;
      -webkit-animation: object_big 2s infinite;
      animation: object_big 2s infinite;
      -webkit-animation-delay: 0.5s; 
        animation-delay: 0.5s; 
    }	
    @-webkit-keyframes object_big {
    50% { -webkit-transform: scale(0.5); }
    }
    @keyframes object_big {
    50% { 
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
      } 
    }
    @-webkit-keyframes object_one {
    50% { -webkit-transform: translate(-65px,-65px)  ; }
    }
    @keyframes object_one {
    50% { 
        transform: translate(-65px,-65px) ;
        -webkit-transform: translate(-65px,-65px) ;
      } 
    }
    @-webkit-keyframes object_two {
      50% { -webkit-transform: translate(0,-65px) ; }
    }
    @keyframes object_two {
    50% { 
        transform: translate(0,-65px) ; 
        -webkit-transform: translate(0,-65px) ; 
      } 
    }
    @-webkit-keyframes object_three {
    50% { -webkit-transform: translate(65px,-65px) ; }
    }
    @keyframes object_three {
    50% { 
        transform: translate(65px,-65px) ;
        -webkit-transform: translate(65px,-65px) ;
      } 
    }
    @-webkit-keyframes object_four {
      
      50% { -webkit-transform: translate(65px,0) ; }

    }
    @keyframes object_four {
      50% { 
        transform: translate(65px,0) ;
        -webkit-transform: translate(65px,0) ;
      } 
    }
    @-webkit-keyframes object_five {

      50% { -webkit-transform: translate(65px,65px) ; }
    }
    @keyframes object_five {
      50% { 
        transform: translate(65px,65px) ;
        -webkit-transform: translate(65px,65px) ;
      } 
    }

    @-webkit-keyframes object_six {
      50% { -webkit-transform: translate(0,65px) ; }
    }

    @keyframes object_six {
      50% { 
        transform:  translate(0,65px) ;
        -webkit-transform:  translate(0,65px) ;
      } 
    }
    @-webkit-keyframes object_seven {
      50% { -webkit-transform: translate(-65px,65px) ; }
    }
    @keyframes object_seven {
      50% { 
        transform: translate(-65px,65px) ;
        -webkit-transform: translate(-65px,65px) ;
      } 
    }
    @-webkit-keyframes object_eight {
      50% { -webkit-transform: translate(-65px,0)} ; 
    }
    @keyframes object_eight {
      50% { 
        transform: translate(-65px,0) ;
        -webkit-transform: translate(-65px,0) ;
      } 
    }
	</style>
    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link
            href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
            rel="stylesheet"
    />
    <% } %>
    <!-- 使用CDN的CSS文件 -->
    
    <title>人人家智慧社区</title>
  </head>
  <body style="width: 100%;height: 100%;">
    <noscript>
      <strong>We're sorry but blog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="vue-loading">
      <div id="loading-center">
        <div id="loading-center-absolute">
          <div class="object" id="object_one"></div>
          <div class="object" id="object_two"></div>
          <div class="object" id="object_three"></div>
          <div class="object" id="object_four"></div>
          <div class="object" id="object_five"></div>
          <div class="object" id="object_six"></div>
          <div class="object" id="object_seven"></div>
          <div class="object" id="object_eight"></div>
          <div class="object" id="object_big"></div>
        </div>
      </div>
    </div>
    <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>
    <% } %>
    <!-- 使用CDN的JS文件 -->
      <script>
        window.onload=function(){
          if(document.querySelector("#vue-loading") !==undefined){
            document.querySelector("#vue-loading").remove()
          }
        }
      </script>
  </body>
</html>

4.代码压缩

安装

npm i -D uglifyjs-webpack-plugin

// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
config.plugins.push(
    new UglifyJsPlugin({
        uglifyOptions: {
            //生产环境自动删除console
            compress: {
                drop_debugger: true,
                drop_console: true,
                pure_funcs: ['console.log']
            }
        },
        sourceMap: false,
        parallel: true
    })
)

5.公共代码抽离，写在configureWebpack模块中

// 公共代码抽离
configureWebpack: config => {
    // 生产环境相关配置
    if (isProduction) {
        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'
		            }
		        }
		    }
		}
    }
},

6.图片压缩()

安装

npm i image-webpack-loader --save-dev

在chainWebpack中新增以下代码

  configureWebpack: config => {
      // 生产环境相关配置
      if (isProduction) {
          config.module.rule('images')
		    .use('image-webpack-loader')
		    .loader('image-webpack-loader')
		    .options({ bypassOnDebug: true })
		    .end()
      }
  },

6.最终代码

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';

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

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

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

// cdn链接
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
    vue: "Vue",
    vuex: "Vuex",
    "vue-router": "VueRouter",
    axios: "axios",
    vant: "vant",
  },
  //
  // cdn的css链接
  css: ["https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"],
  // cdn的js链接
  js: [
    "https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js",
    "https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js",
    "https://cdn.jsdelivr.net/npm/vue-router@3.4.9/dist/vue-router.min.js",
    "https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js",
    "https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js",
  ],
};

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

        // ============压缩图片 start============
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
        // ============压缩图片 end============
    },
    configureWebpack: config => {
        // 用cdn方式引入，则构建时要忽略相关资源
        if (isProduction || devNeedCdn) config.externals = cdn.externals

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

            // 代码压缩
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        //生产环境自动删除console
                        compress: {
                            drop_debugger: true,
                            drop_console: true,
                            pure_funcs: ['console.log']
                        }
                    },
                    sourceMap: false,
                    parallel: true
                })
            )
        }

        // 公共代码抽离
        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'
                    }
                }
            }
        }
    }
}
江-月*夜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
vue-cli3 编译打包文件的压缩优化
JEECG官方博客
04-26 3529
前言 相比于vue-cli2，vue-cli3隐藏了很多默认的webpack配置，没有vue-cli2那么一目了然。但是都提供了各部分的修改路口，可以仔细研读下官方文档。vue-cli3官方文档 真的，如果真的不是业务需要，真的不会去仔细研读官方文档，因为读了也会马上忘掉。但是真的需要的时候，又会第一时刻想起官方文档，看了后才恍然大悟，原来官方文档里都写得一清二楚。内牛满面~~ 正文 包含了...
Vue CLI4.0 webpack配置属性——css.sourceMap
黄彪博客
02-13 749
Vue CLI4.0 webpack配置属性——css.sourceMap
Vue中SourceMap的使用方法详解
最新发布
青春木鱼的博客
04-11 1356
SourceMap是一种映射文件，它可以将编译后的代码映射回原始的源代码。在Vue开发中，我们通常会将Vue组件的单文件(.vue)编译成JavaScript文件，使用SourceMap可以将编译后的JavaScript代码映射回原始的Vue组件代码，方便我们进行调试。
Vue 使用Vue-Cli4x 创建Vue项目
booleanstr的博客
04-20 785
Vue 使用Vue-Cli4x 创建Vue项目Vue 使用Vue-Cli4x 创建Vue项目新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowcha...
vue-cli 4x生产环境中删除console.log
小火车况且况且况且的博客
08-14 1322
vue-cli 4x使用babel-plugin-transform-remove-console删除console.log 安装 npm i babel-plugin-transform-remove-console 在跟目录下的.babel.config.js中 const productionPlugins = [] // 判断当前的环境是开发还是生产 if(process.env.NODE_ENV === 'production') { productionPlugins.push
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page 命令 以下是此插件的 3 个命令： init-config : 初始化vue.config.js & Views.json两个文件到你的项目 build-multi : 并行构建多个...
vue-cli3项目升级到vue-cli4 的方法总结
10-15
主要介绍了vue-cli3项目升级到vue-cli4 的方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli 为项目设置别名的方法
12-13
1.使用场景：在项目开发过程中经常需要引入各种文件，例img，css，js等，我们可以在vue-cli中给不同目录设置别名，方便我们使用 2.vue-cli 2x 配置 // 在 webpack.base.config.js中的 resolve 配置项，在其 alias ...
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
vue-cli-plugin-tailwind 一个将Tailwind CSS添加到您的vue-cli项目的插件。入门在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果...
vue 中echarts5.x 引入方式
qq_36529240的博客
08-19 3004
一安装 npm install echarts --save 二、全局引入（main.js） import * as echarts from 'echarts' Vue.prototype.$echarts = echarts; 新建echarts.vue文件 <template> <div> <div :id="chartId" style="{ width: 500px, height: 500px}"></div> <
vue 百度地图 3d地图
qq_36529240的博客
09-09 2190
效果图 在这里插入图片描述 一、新建js文件（3dmap.js） const ak = '你的百度地图秘钥' // 百度的地图密钥申请 https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey /** * 异步加载百度地图 * @returns {Promise} * @constructor */ function loadBaiDuMap() { return new Promise(function (reso
vue-baidu-map自定义颜色
qq_36529240的博客
08-16 2092
一、自定义样式 data() { return { //自定义地图颜色 styleJson: [ { featureType: "water", elementType: "all", stylers: { color: "#021019", }, }, { featureType: "highway",
搭建vue3.0+Element Plus项目
qq_36529240的博客
07-06 1939
一、全局安装vue-cli4.x脚手架 npm install @vue/cli -g 二创建项目 vue create 项目名字 我的项目选项 三、安装element plus npm install element-plus --save 在 main.js 中写入以下内容： /* import ElementPlus from 'element-plus'; app.use(ElementPlus) 不知道为什么引用这个方法，页面报错，意思说找不到。我用官网另一个方法做 */ import
vite2.x+vue3 百度地图绘制
qq_36529240的博客
12-03 1878
1.提示： 同理可以做其他绘制 vite2.x+vue3安装忽略前面有安装介绍 https://editor.csdn.net/md/?articleId=120757440 vue3 百度地图和高德地图目前没有vue3的版本 百度地图提供了用链接方式做 https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld 2.效果图 在index.html文件上添加百度地图 <script type="text/javasc
js 二进制流转换base64图片
qq_36529240的博客
01-09 1863
js 二进制转banse64
vue+element-ui 省市区三级联动（返回汉字）
qq_36529240的博客
03-29 1845
一安装 npm install element-china-area-data -S 二、导入 import { regionData, CodeToText} from "element-china-area-data" 我们默认地址是汉字不是编码（编码就默认） 如图： 三、代码 <html> <head></head> <body> <template> <div id="app"> <div&
基于Vue2.x+xterm4.x实现终端terminal
qq_36529240的博客
03-11 1517
一、安装 npm install --save xterm xterm-addon-fit xterm-addon-attach xterm-addon-fit xterm.js的插件，使终端的尺寸适合包含元素。 xterm-addon-attach xterm.js的附加组件，用于附加到Web Socket 二、代码 <template> <div class="box"> <div id="xterm" class="xterm-box">&
vue-cli2 项目如何迁移到cli3
09-03
将Vue-cli2项目迁移到Vue-cli3可以按照以下步骤进行操作： 1. 全局安装Vue-cli3的命令行工具： ``` npm install -g @vue/cli ``` 2. 在Vue-cli3的命令行界面中，使用以下命令将Vue-cli2项目创建为Vue-cli3项目的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值