Vue Cli3 项目打包优化

最新推荐文章于 2024-07-05 11:36:09 发布
最新推荐文章于 2024-07-05 11:36:09 发布
阅读量635 收藏 3
点赞数 1
分类专栏： 项目打包 笔记 文章标签： vue js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/motong_lee/article/details/115914817
版权

1.项目优化

实现步骤：

  1. 清除生产环境中的console.log语句
  2. 生成打包报告，根据报告优化项目
  3. 第三方库启用CDN
  4. 路由懒加载
  5. 首页内容定制

2.执行build

2.1 清除生产环境中的console.log语句

安装一个插件（babel-plugin-transform-remove-console）在项目build阶段移除所有的console信息

2.1.1 安装开发依赖babel-plugin-transform-remove-console

npm i babel-plugin-transform-remove-console -D

2.2.2 打开babel.config.js，编辑代码如下：

// 项目发布阶段需要用到的babel插件
const productPlugins = []

// 判断是开发还是发布阶段
if (process.env.NODE_ENV === 'production') {
  // 发布阶段
  productPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', { modules: false }] // 让babel转码不要将es6的模块化语法转化为common.js中的require
  ],
  plugins: [  
    ...productPlugins
  ]
}

3. 生成打包报告

3.1 命令行形式生成打包报告

控制台执行命令：

vue-cli-service build --report

3.2 使用Vue-Cli3的图形界面查看打包报告

  1. 在cmd命令行运行命令： vue ui，可以开启Vue-cli3中提供的一个图形化页面的工具

  2. 在Vue项目管理器中，选择导入自己的项目文件夹

  3. 点击“任务”=>“build”=>“运行”。运行完毕之后点击右侧“分析”，“控制台”面板查看报告

4. 修改webpack的默认配置

默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack，需要通过项目根目录下的 vue.config.js 文件来配置。

Vue-Cli官网关于修改Webpack打包配置：https://cli.vuejs.org/zh/guide/webpack.html，chainWebpack可以通过链式编程的形式，修改webpack配置，configureWebpack可以通过操作对象的形式，修改webpack配置

4.1 修改publicPath

将publicPath设为相对路径。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my**-**app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。

module.exports = {
	publicPath: './',
	...
}

4.2 指定生产模式和开发模式下不同的打包入口文件

为了针对生产模式下的项目打包优化，我们需要针对开发模式和生产模式指定不同的项目打包入口文件。

首先复制项目原有的入口文件main.js，分别命名为main.prod.js和main.dev.js，分别作为生产模式和开发模式下的入口文件。

module.exports = {
    publicPath: './',
    chainWebpack:config=>{
        //生产模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main.prod.js')
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main.dev.js')
        })
    }
}

5.加载外部CDN

默认情况下，依赖项的所有import的第三方包都会被打包到js/chunk-vendors.******.js文件中，导致该js文件过大
那么我们可以通过__externals__(外部扩展)排除这些包，使它们不被打包到js/chunk-vendors.******.js文件中，对它们的使用是从window/global全局对象中来获取

  • externals 对象属性解析：
    • 引入项目的包名 : 全局对象中挂载实例的名字

以element-ui举例 ，我们通过import {Button} from 'element-ui'的方式从element-ui中引入Button按钮， 'element-ui’就是引入的包名。

而element-ui的cdn文件中，暴露出的属性名为’ELEMENT’

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("ELEMENT",["vue"],t):"object"==typeof exports?exports.ELEMENT=t(require("vue")):e.ELEMENT=t(e.Vue)}

所以element-ui的externals的属性值应该是’ELEMENT’

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')

            //使用externals设置排除项
            config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                echarts:'echarts',
                'vue-quill-editor':'VueQuillEditor'
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

设置好排除之后，为了使我们可以使用vue，axios等内容，我们需要加载外部CDN的形式解决引入依赖项

然后打开public/index.html添加外部cdn引入代码

<!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">
    <title><%= htmlWebpackPlugin.options.title %></title>
	
    <!-- css样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <link href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.core.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.snow.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.bubble.min.css" rel="stylesheet">

	<!-- js -->
    <script src="https://cdn.staticfile.org/vue/2.6.12/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/zrender/5.0.4/zrender.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-echarts/4.1.0/vue-echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/quill/1.3.4/quill.min.js"></script>
  </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 -->
  </body>
</html>

6.定制首页内容

开发环境的首页和发布环境的首页展示内容的形式有所不同
如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现
我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......
            
            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = true
                return args
            })
        })

        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')

            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

然后在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">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- css样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    ........
   <!-- js -->
    <script src="https://cdn.staticfile.org/vue/2.6.12/vue.js"></script>
    <% } %>
  </head>
  .......

6. 路由懒加载

当路由被访问时才加载对应的路由文件，就是路由懒加载。
路由懒加载实现步骤：
1.安装 @babel/plugin-syntax-dynamic-import

 npm i @babel/plugin-syntax-dynamic-import -D

2.在babel.config.js中声明该插件，打开babel.config.js

// 项目发布阶段需要用到的babel插件
const productPlugins = []

// 判断是开发还是发布阶段
if (process.env.NODE_ENV === 'production') {
  // 发布阶段
  productPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', { modules: false }] // 让babel转码不要将es6的模块化语法转化为common.js中的require
  ],
  plugins: [
    // 引入其它插件
    ...productPlugins,
    '@babel/plugin-syntax-dynamic-import'
  ]
}

3.将路由更改为按需加载的形式，打开router.js，更改引入组件代码如下：

import Vue from 'vue'
import Router from 'vue-router'

// import HomeView from '../views/home/HomeView'
const HomeView = () => import(/* webpackChunkName:'login_home_welcome' */ '../views/home/HomeView')
// import WelcomeView from '../views/welcome/WelcomeView'
const WelcomeView = () => import(/* webpackChunkName:'login_home_welcome' */ '../views/welcome/WelcomeView')
// import LoginView from '../views/login/LoginView'
const LoginView = () => import(/* webpackChunkName:'login_home_welcome' */ '../views/login/LoginView')

7. 项目上线

7.1 通过node创建服务器

创建一个文件夹zmall_server存放node服务器
使用终端打开zmall_server文件夹，输入命令 npm init -y
初始化包之后，输入命令 npm i express -S
打开zmall项目目录，复制dist文件夹，粘贴到zmall_server中
在zmall_server文件夹中创建app.js文件,编写代码如下：

const express = require('express')

const app = express()

app.use(express.static('./dist'))

app.listen(8999,()=>{
    console.log("服务已启动 http://127.0.0.1:8999")
})

然后在终端中输入命令 nodemon app.js，启动服务

7.2 开启gzip压缩

打开zmall_server文件夹的终端，输入命令：npm i compression -D
打开app.js,编写代码：

const express = require('express')

const compression = require('compression')

const app = express()

app.use(compression())
app.use(express.static('./dist'))

app.listen(8999,()=>{
    console.log("服务已启动 http://127.0.0.1:8999")
})

7.3 配置https服务

配置https服务一般是后台进行处理，前端开发人员了解即可。
首先，需要申请SSL证书，进入https://freessl.cn官网
在后台导入证书，打开今天资料/素材，复制素材中的两个文件到zmall_server中
打开app.js文件，编写代码导入证书，并开启https服务

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')

const app = express()
//创建配置对象设置公钥和私钥
const options = {
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}

app.use(compression())
app.use(express.static('./dist'))

// app.listen(8999,()=>{
//     console.log("服务已启动 http://127.0.0.1:8999")
// })

//启动https服务
https.createServer(options,app).listen(443)

注意：如果我们使用的证书有问题，是无法正常使用https服务

7.4 使用pm2管理应用

打开zmall_server文件夹的终端，输入命令：npm i pm2 -g
使用pm2启动项目，在终端中输入命令：pm2 start app.js --name 自定义名称
查看项目列表命令：pm2 ls
重启项目：pm2 restart 自定义名称
停止项目：pm2 stop 自定义名称
删除项目：pm2 delete 自定义名称

字里行间皆是陷阱
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli3打包优化
欧阳的技术博客
07-26 1209
vue-cli3.0相对于2.0，已经给我们优化了很多了，大家可以打开项目里的node_modules，找到@vue/cli-serve, 这里也说一点，如果你想更深入的了解vue而不仅仅是停留在应用层是一定要去看这些node_modules的。看它里面是怎么配置以及怎么封装的，学习它的思想。 正因为3.0已经做了一些默认的配置，我们进行的进一步优化以及其它配置都放在vue.config.js...
vue-cli3项目打包优化
艾欢欢的博客
01-02 1801
原始包大小 以下主要操作都在文件 vue.config.js 下进行，如没有此文件，就在项目根目录下新建。 1.去掉 .map 文件 .map 文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了 .map 就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 操作： module.exports = { // ... ...
一篇关于vue-cli3打包优化的文章
asdfghjkl_6的博客
05-05 254
在开发过程中vue项目打包是需要做一些性能优化的，这里写了关于我知道的要做的优化的部分，废话不多说直接上代码了，仅供参考 欢迎提出意见 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const path = require('path') // 开启Gzip需要的依赖 yarn add compression-webpack-plugin -D const CompressionWebpackPlugin = require('comp
Vue3项目打包优化
最新发布
valsedefleurs的博客
07-05 520
Vue3项目打包优化
Vue Cli3项目的打包优化
廊坊吴彦祖
12-24 407
Vue Cli3项目的打包优化 使用vue cli3创建一个项目，在项目根目录下创建配置文件vue.config.js vue.config.js 是一个可选的审查或修改全局的 CLI 配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载 vue.config.js： module.exports = { ...
关于vue-cli3的打包优化
qq_60008492的博客
03-21 870
在开发过程中vue项目打包是需要做一些性能优化的，这里写了关于我知道的要做的优化的部分，废话不多说直接上代码了，仅供参考 欢迎提出意见 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const path = require('path') // 开启Gzip需要的依赖 yarn add compression-webpack-plugin -D const CompressionWebpackPlugin = require('com
关于vue-cli 3配置打包优化要点（推荐）
10-17
Vue-cli 3配置打包优化要点涵盖了对Vue项目构建工具的配置进行优化的一系列方法和技巧。这些方法主要目的是提高项目的性能，降低构建后文件的大小，减少加载时间，提升用户体验。 1. 路由懒加载 Vue项目中路由懒...
vue-cli3项目打包后自动化部署到服务器的方法
10-14
Vue CLI 3 的打包命令通常是 `npm run build`，它会生成一个 `dist` 目录，包含优化过的静态资源，适合生产环境。 接下来，为了实现自动化部署，我们需要借助一个名为 `scp2` 的模块，它允许我们通过 SSH 协议安全...
vue-cli webpack2项目打包优化分享
08-28
"Vue-Cli Webpack2 项目打包优化分享" 模块搜索范围优化 在 Vue-Cli Webpack2 项目中，模块搜索范围的优化是非常重要的。默认情况下，Webpack 的 resolve.modules 配置会采用向上递归搜索的方式去寻找模块库（即 ...
基于vuecli3的项目可行性优化方案探索
08-09
基于 vue-cli@3 做的关于 CDN Gzip Prerender Sass 的优化。在基于 vue-cli@2 的项目 vue-optimization 里已经对这些优化方案做了详细说明。
vuecli3 配置优化vue.config.js
波~的博客
07-24 426
图片压缩 安装依赖：cnpm install image-webpack-loader --save-dev 代码压缩 安装依赖：cnpm i -D uglifyjs-webpack-plugin 开启Gzip 安装依赖：cnpm install --save-dev compression-webpack-plugin // 代码压缩 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // gzip压缩 const Compress
Vue-cli3 项目打包上线 及优化策略
韩旭的博客
04-30 587
## 一、Vue-cli是什么，及什么是打包。 #### 1.1 vue-cli是什么？ vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。 > 注意:也可以生成多页面哦！我们需要自己配置我们的vue.config.js 引入glog进行相应操作即可！
vue-cli 3配置打包优化
q370786406的博客
09-23 266
关于vue-cli 3配置打包优化要点 配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数 /** * 返回异步组件 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用 */ const AsyncComponentHook = (path: String): Function => (): any => { // 通过 webpack 的内联注释,设置模块名 let component = import( /* webpackChunkN
vue 打包优化
絮落锦乡的博客
04-10 250
【Vuejs】317- 提升90%加载速度——Vuecli下的首屏性能优化 前言 之前用 vuecli做了个博客，是一个单页面项目，大概有十个路由 直接 npm run build打包出来，有一个 1M的巨大 js文件 先挂载到服务器上试试 好家伙 这加载时间 仿佛过了半个世纪 首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了，没有用户能忍受 9s的白屏而不关闭页面的 过程中，我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3，所以接下来还会介绍
关于vue-cli3打包优化的文章
m0_55295461的博客
08-03 84
在开发过程中vue项目打包是需要做一些性能优化的，这里写了关于我知道的要做的优化的部分
vue webpack打包优化
脚步
08-08 9246
如果我们的 Vue 项目比较大．或者说项目中引入了许多第三方库，那么在执行 npm run build 构建项目的时候会极其的慢．比如我现在的项目就每次打包就要 83s。       下面是我整理的一些优化技巧，可以有效地提高打包速度。   一、配置 resolve.modules 1，优化原理 （1）webpack 的 resolve.modules 是用来配置模块库（即 nod...
vue-cli项目打包
04-26
如何优化打包速度？ 有多种方法可以优化vue-cli项目的打包速度，以下是其中的一些： 1. 首先，在打包之前，可以使用babel-plugin-import或者babel-plugin-lodash等插件来按需引入第三方库，从而减小打包体积。 2. 其次，可以使用webpack-bundle-analyzer来分析项目打包后的文件大小及依赖关系，从而更好地优化打包配置。 3. 另外，还可以通过splitChunksPlugin等插件将公共代码抽离出来，从而减小打包体积，并提升页面加载速度。 4. 还可以使用webpack-parallel-uglify-plugin等插件启用多进程压缩来提升压缩速度。 5. 最后，可以在代码中使用vue的异步组件特性来降低初始加载体积。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值