ZBestPC项目工程化

# ZBestPC项目工程化

# 准备工作

项目源码：https://github.com/NewCoder798/ZBestPC (opens new window)

源码分析：原生html + css + js项目

问题分析

css和js资源多，全部采用同步加载，渲染需要多次请求和加载，降低页面加载性能
css和js资源未压缩
需同时维护html、css和js，代码逻辑和结构不清晰，迭代困难，难以维护
项目不支持source-map,调试困难

# 项目需求

第一阶段:项目 webpack 改造，使原生is项目能够支持模块开发及打包
第二阶段:Vue SPA (单页应用)改造，使项目能够使用 Vue 进行单页应用开发
第三阶段:Vue MPA (多页应用) 改造，使项目能够使用 Vue 进行多页应用开发

# 第一阶段：Webpack改造

项目初始化
1. 创建npm项目
2. 安装webpack依赖
3. 创建js入口文件
4. 创建webpack配置文件
5. 配置package.json的build命令
6. 执行npm run build打包
首页移植
1. 将资源文件html、js、css、img拷贝到src目录下
2. 删除index.html中所有link和script的引用
3. 安装html-webpack-plugin插件
  - html-webpack-plugin对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的webpack包特别有用。
  - 此插件能够为html文件自动引入js
  - html-webpack-plugin模块安装指令如下：
```
npm install html-webpack-plugin --dev-save
```
  1
4. 使用style-loader和css-loader实现css资源的打包加载
5. 使用ModuleAssets解决图片url加载问题。（css和html中的url路径暂时是使用的源目录的路径。在项目优化中会使用copy-webpack-plugin进行解决）
6. 使用ProvidePlugin解决JQuery全局定义的问题
项目优化
- 分离js，不然所有的页面都在一个js中就太大了
  1. 使用HtmlWebpackPlugin中的chunks属性分配js文件
  2. chunks中的名称对应entry中的键名
- 热部署，修改后不用频繁build
  1. 使用webpack-dev-server
  2. 用完后图片资源会出现问题，我们需要使用插件进行资源的拷贝
- 使用mini-css-extract-plugin对css进行分离
- 使用uglifyjs-webpack-plugin对js进行压缩
- 使用css-minimizer-webpack-plugin对js进行压缩
- 使用loadash 和treeshaking 使得代码中没被用到的部分不被打包，减少文件大小
  - treeshaking触发条件
    1. 通过解构的方式能够触发treeshaking
    2. 调用的npm包必须使用ESM
  - development模式下只能实现文件级的treeshaking，即打包当前方法所在的文件。在production模式下能实现方法级的treeshaking，即只打包当前方法。
- 代码分割
  - 使用webpack配置中的optimization下的splitChunks
- html代码分割
  - 使用ejs将网页中通用的部分提取出来，而不是复制粘贴
- 使用clean-webpack-plugin清理dist中过时的文件，保证dist目录下的文件是最新的

# 第二阶段 Vue SPA / Vue MPA应用改造

创建build目录

将webpack.config.js文件放入build目录，并修改build指令如下
```
{"build":"webpack --config ./build/webpack.config.js"
```
1
修改webpack.config.js下的资源目录，使得生成的dist目录与build同级
在build目录下，创建webpack.vue.config.js

# 第三阶段 Vue2升级Vue3

Vue3比起Vue2更偏向于使用解构的方式导入模块方法。如使用createApp()替代了需要导入Vue类进行实例化。

编辑

← Webpack快速入门 Vue2-Elm项目升级→