Webpack打包–优化项目

1. Webpack基本概念

目标: webpack本身是, node的一个第三方模块包, 用于打包代码

2.Webpack能做什么

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

3.Webpack的官方解释

从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包）

4.我写了一个后台管理的一个系统现在来进行一下项目的优化

• 生成打包报告
• 第三方库启用CDN
• Element-UI组件按需加载
• 路由懒加载
• 首页的内容优化

5.首先就是在项目的顶部会有一个进度条

• 安装 npm i –save nprogress

我是在vue ui 可视化中安装的

• 在Vscode终端中输入 vue ui 进入Vue CLI
• 找到左侧依赖，然后点击右上角的安装依赖
• 进入运行依赖，输入nprogress
• 点击选中以后滑到底部点击安装

使用nprogress

• 在项目中的main.js导入nprogress
• import NProgress from ‘nprogress’
• import ‘nprogress/nprogress.css’
• 在request拦截器中使用NProgress.start()，展示进度条
• 在response拦截器中使用NProgress.done()，隐藏进度条

删除项目中的console.log(),只是在发布后删除，开发的时候不进行操作

同上进入依赖，不过这次是进入开发依赖，然后点击最下方的安装

在项目中找到 babel.config.js 文件

"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    // 引入去除console.log()
    'transform-remove-consile'
  ]

完成，运行项目

只在发布阶段去移除console.log()，还是在 babel.config.js 文件

开发阶段

发布阶段

// 这是项目发布阶段需要要用到的babel插件
const prodPlugins = []
// 判断当前是开发阶段还是发布阶段
if(process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    // 发布产品时候的插件数组
    ...prodPlugins,
    '@babel/plugin-syntax-dynamic-import'
  ]
}

修改完以后要从新去运行项目

生成打包报告

使用第二种方式

通过 vue.config.js 修改 Webpack默认的配置，如果没有这个文件可以手动创建(在根目录中创建)

module.exports = defineConfig{
 
}

为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件(即src/main.js)。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包入口文件:

1.开发模式的入口文件为scr/main-dev.js

2.发布模式的入口文件为src/main-prod.js

configureWebpack和chainWebpack

在 vue.config.js 导出的配置对象中，新增configureWebpack或chainWebpack节点来定义webpack的打包配置

在这里，configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方法不同：

1.chainWebpack 通过链式编程的形式，来修改默认的webpack配置

2.configureWebpack 通过操作对象的形式，来修改默认的webpack配置

通过chainWebpack自定义打包入口 （vue.config.js 文件）

1.首先把main.js删除或者更换名称main-dev.js

2.把main-dev.js中的内容复制一份在src目录下新建一个main-prod.js把复制的内容粘贴进去

3.进入 vue.config.js 文件

module.exports = defineConfig{
 chainWebpack: (config) => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', (config) => {
      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')
    })
  }
}

运行项目

通过externals加载外部CDN资源

module.exports = defineConfig{
 chainWebpack: (config) => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', (config) => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })

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

通过externals加载外部CDN资源

需要在public/index.html文件的头部，添加CDN资源

首先要先把main-prod.js中的相关内容删掉

以.css为点缀的删除

进入public/index.html文件

通过CDN优化ElementUI的打包

虽然在开发阶段，我们启用了 element-ui 组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加的组件，还是占用了较大的文件体积。此时，我们可以将element-ui 中的组件，也通过 CDN 的形式来加载，这样能够进一步减小打包后的文件体积。

具体操作流程如下:

1.在 main-prodjs 中，注释掉 element-ui按需加载的代码

2.在index.html的头部区域中，通过CDN 加载element-ui的js和css 样式

路由懒加载

当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

具体需要 3 步:

1.安装@babel/plugin-syntax-dynamic-import 包

2.在 babel.configjs 配置文件中声明该插件

// 这是项目发布阶段需要要用到的babel插件
const prodPlugins = []
if(process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    // 发布产品时候的插件数组
    ...prodPlugins,
    // 路由懒加载
    '@babel/plugin-syntax-dynamic-import'
  ]
}

3.将路由改为按需加载的形式，示例代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'

// import Login from '../components/Login.vue'
const Login = () => import(/*webpackChunkName: "Login_Home_Welcome" */ '../components/Login.vue')
// import Home from '../components/Home.vue'
const Home = () => import(/*webpackChunkName: "Login_Home_Welcome" */ '../components/Home.vue')
// import Welcome from '../components/Welcome.vue'
const Welcome = () => import(/*webpackChunkName: "Login_Home_Welcome" */ '../components/Welcome.vue')

// import Users from '../components/user/User.vue'
const Users = () => import(/*webpackChunkName: "Users_Rights_Roles" */ '../components/user/User.vue')
// import Rights from '../components/power/Rights.vue'
const Rights = () => import(/*webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
// import Roles from '../components/power/Roles.vue'
const Roles = () => import(/*webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')

// import Categories from '../components/goods/Cate.vue'
const Categories = () => import(/*webpackChunkName: "Categories_Params" */ '../components/goods/Cate.vue')
// import Params from '../components/goods/Params.vue'
const Params = () => import(/*webpackChunkName: "Categories_Params" */ '../components/goods/Params.vue')

// import Goods from '../components/goods/List.vue'
const Goods = () => import(/*webpackChunkName: "Goods_Add_Edit" */ '../components/goods/List.vue')
// import Add from '../components/goods/Add.vue'
const Add = () => import(/*webpackChunkName: "Goods_Add_Edit" */ '../components/goods/Add.vue')
// import Edit from '../components/goods/Edit.vue'
const Edit = () => import(/*webpackChunkName: "Goods_Add_Edit" */ '../components/goods/Edit.vue')

// import Orders from '../components/order/order.vue'
const Orders = () => import(/*webpackChunkName: "Orders_Reports" */ '../components/order/order.vue')
// import Reports from '../components/report/Report.vue'
const Reports = () => import(/*webpackChunkName: "Orders_Reports" */ '../components/report/Report.vue')

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/home',
    name: 'home',
    redirect: '/welcome',
    component: Home,
    children: [
      {
        path: '/welcome',
        name: 'welcome',
        component: Welcome
      },
      {
        path: '/users',
        name: 'user',
        component: Users
      },
      {
        path: '/rights',
        name: 'rights',
        component: Rights
      },
      {
        path: '/roles',
        name: 'roles',
        component: Roles
      },
      {
        path: '/categories',
        name: 'categories',
        component: Categories
      },
      {
        path: '/params',
        name: 'params',
        component: Params
      },
      {
        path: '/goods',
        name: 'goods',
        component: Goods
      },
      {
        path: '/goods/add',
        name: 'add',
        component: Add
      },
      {
        path: '/orders',
        name: 'orders',
        component: Orders
      },
      {
        path: '/reports',
        name: 'report',
        component: Reports
      },
      {
        path: '/goods/edit/:id',
        name: 'edit',
        component: Edit
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

项目上线

创建一个文件夹

1.npm init -y

2.npm i

3.创建一个app.js

4.安装一个 npm i express -S

5.将我们打包生成的dist复制到新创建的文件夹中

const express = require('express')
const app = express()

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

app.listen(1314, () => {
  console.log('server running at http://127.0.0.1:1314');
})