Amadeus's blog Amadeus's blog
首页
  • 前端文章

    • JavaScript
    • Vue
    • TypeScript
    • 前端工程化
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
  • HTML
  • CSS
  • stylus
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 口语
  • 音标
  • 语法
  • 简单
  • 中等
  • 困难
  • 20年10月
  • 20年11月
  • 20年12月
  • 21年01月
  • 21年02月
  • 21年03月
  • 21年04月
  • 21年05月
  • 21年06月
  • 21年07月
  • 21年08月
  • 21年09月
  • 21年10月
  • 21年11月
  • 21年12月
  • 22年01月
  • 22年02月
  • 22年03月
  • 22年04月
  • 22年05月
  • 22年06月
  • 22年07月
  • 22年08月
  • 22年09月
  • 21年3月
  • 知识笔记
  • 22年5月
  • 22年8月
  • 22年9月
  • 学习
  • 书法
  • 面试
  • 音乐
  • 驾照
  • 深度强化学习
  • 心情杂货
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Amadeus

起风了,唯有努力生存!
首页
  • 前端文章

    • JavaScript
    • Vue
    • TypeScript
    • 前端工程化
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
  • HTML
  • CSS
  • stylus
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 口语
  • 音标
  • 语法
  • 简单
  • 中等
  • 困难
  • 20年10月
  • 20年11月
  • 20年12月
  • 21年01月
  • 21年02月
  • 21年03月
  • 21年04月
  • 21年05月
  • 21年06月
  • 21年07月
  • 21年08月
  • 21年09月
  • 21年10月
  • 21年11月
  • 21年12月
  • 22年01月
  • 22年02月
  • 22年03月
  • 22年04月
  • 22年05月
  • 22年06月
  • 22年07月
  • 22年08月
  • 22年09月
  • 21年3月
  • 知识笔记
  • 22年5月
  • 22年8月
  • 22年9月
  • 学习
  • 书法
  • 面试
  • 音乐
  • 驾照
  • 深度强化学习
  • 心情杂货
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • TypeScript笔记

  • 前端工程化

    • 为何要前端工程化
    • 前端工程化发展历史
    • 工程化关键技术
    • Webpack快速入门
    • ZBestPC项目工程化
      • Vue2-Elm项目升级
      • 脚手架
      • React项目
      • ZBestPC项目React化
      • Vite入门
      • 前端性能优化
      • Webpack源码分析
      • vue-loader源码分析
    • 面试

    • 小程序

    • Vue3源码解析

    • 设计模式

    • NestJS笔记

    • JavaScript文章

    • Vue文章

    • 学习笔记

    • 前端
    • 前端工程化
    Amadeus
    2022-11-27
    目录

    ZBestPC项目工程化

    # ZBestPC项目工程化

    # 准备工作

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

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

    问题分析

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

    # 项目需求

    1. 第一阶段:项目 webpack 改造,使原生is项目能够支持模块开发及打包
    2. 第二阶段:Vue SPA (单页应用)改造,使项目能够使用 Vue 进行单页应用开发
    3. 第三阶段: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目录

    1. 将webpack.config.js文件放入build目录,并修改build指令如下

      {"build":"webpack --config ./build/webpack.config.js"
      
      1
    2. 修改webpack.config.js下的资源目录,使得生成的dist目录与build同级

    3. 在build目录下,创建webpack.vue.config.js

    # 第三阶段 Vue2升级Vue3

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

    编辑 (opens new window)
    Webpack快速入门
    Vue2-Elm项目升级

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

    最近更新
    01
    最长递增子序列
    04-21
    02
    非递减子序列
    04-21
    03
    全排列
    04-21
    更多文章>
    Theme by Vdoing | Copyright © 2020-2024 Amadeus | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式