当前位置： 文江博客文章教程详情

Web 前端编译构建优化

发布于 2024-09-15 22:02:45 字数 18417 浏览 36 评论 0

接口，调用汇总入口和出口

接口，整个项目全局搜，汇总成一个，减少代码量。避免重复代码

代码优化发版

大规模优化，建议放在接入新合作行，因为联调和测试有一个月。 小规模优化，建议放在小版本中。

日志上报-前端优化

  1. 上报数据量、每天频率比较多
  2. 日志打印上报级别规范制定
  3. onerror 分析原因并看看是否做：接口报错、语法报错区分

错误日志、埋点上报到 wa

  • wa 上报，可以更方便查问题。不用去 ecc 查。也减少总部一些错误日志的上报，减少对部门/项目的声誉和考核的影响
  • wa 服务器架构是 hatword(支持批量)

页面接口请求收集和优化

  • 页面接口请求数
  • 哪些接口不用 loading
  • 页面超过 5 个接口，统计出来
  • 哪个接口慢
  • 如何优化接口请求

静态资源报错，前端日志没有上报

比如：图片 404 等

图片大小优化

  • 大图用 webp，降级到 png
  • png8 替代 png24,png24 替代 png32

微信小程序 路由表动态生成 方案

https://www.cnblogs.com/10manongit/p/12722887.html

delete require.cache

使用场景的原因： 但是当我们重新引入 server.js 的 app = require('./server.js') ​ 的时候会发现并不是用的最新的 server.js 文件，原因是 require 的缓存机制，在第一次调用 require('./server.js') ​ 的时候缓存下来了。

export default {}可以缺省，用下面写法来代替：

import * as babelParser from '@babel/parser';

https://blog.csdn.net/m0_37527015/article/details/114398403

less 的 px 单位转化批量为 vm

vscode 搜索框的输入正则 [\s]+(-?(([1-9]\d)|0)(.\d[1-9])?)+px ​ 替换内容： vw2($1) ​ 注：前面有空格

涉及正则知识点：正则变量替换 // 下面的例子用来获取 url 的两个参数，并返回 urlRewrite 之前的真实 Url

var reg=new RegExp("( http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
var url="http://www.qidian.com/BookReader/1017141,20361055.aspx";

方式一，最简单常用的方式

var rep=url.replace(reg,"$1ShowBook.aspx?bookId=$2&chapterId=$3");
alert(rep);
https://www.jb51.net/article/84784.htm

后台日志问题排查，可以请求多带一个无用的页面路径参数，方便生产排查问题。

各种模块化规范，html 怎么引入使用

无模块化直接使用 commonjs 用 webpack amd 用 requirejs cmd 用 seajs https://www.imooc.com/article/20057/

注： requirejs 的网站去下载 js -> requirejs.org

amd 使用

https://blog.csdn.net/qq_25905161/article/details/82688751

rollup 打包 npm 包，优化代码大小

使用 rollup 来打包 library，rollup 相较于 webpack 在打包体积上会跟小，更加适合

rollup 的特点：

Tree Shaking: 自动移除未使用的代码，输出更小的文件
Scope Hoisting: 所有模块构建在一个函数内，执行效率更高
Config 文件支持通过 ESM 模块格式书写
可以一次输出多种格式:
模块规范: IIFE, AMD, CJS, UMD, ESM
Development 与 production 版本: .js ​、 .min.js ​

https://blog.csdn.net/dibisha7239/article/details/102311042

babel-plugin-import

插件会帮我们将 import { message } from 'qw-ui'转换成 import message from 'qw-ui/lib/message' 的写法。同时自动注入组件样式。
https://blog.csdn.net/dibisha7239/article/details/102311042

无用变量构建剔除

编译使用 tree-shaking

多机构代码差异，建议注释构建剔除

预编译阶段处理

wepy 预编译，条件替换/保留

使用场景：多机构

wepy 解析替换插件：wepy-plugin-replace

module.exports.plugins = {
  'replace': {
      filter: /moment\.js$/,
      config: {
          find: /([\w\[\]a-d\.]+)\s*instanceof Function/g,
          replace: function (matchs, word) {
              return ' typeof ' + word + " ==='function' ";
          }
      }
  }
};

小程序拆包优化

  • 把公共文件进行拆包。 > 原理： > 依赖树收集，引用时每个节点计数+1

图片替换成前置的设计方案：

  1. template，转成 ast，读取 image 的 src 的值，取文件名_图片名存缓存，替换为
  2. script，判断是否有 import imagesConfig from '@config/imagesConfig'; ，没有时在最前面加上，读取 class 里 data 的文件名 图片名是否存在，没有则创建 文件名 图片名： imagesConfig.文件名_图片名
  3. imagesConfig，读取 imagesConfig 的 imagesUrl 的文件名 图片名是否存在，没有则创建文件名 图片名 附： httpclient 检查： https://blog.csdn.net/weixin_30514745/article/details/95915838

treeshake

  • 宽松模式
  • 可以自动去掉未使用变量

跨包预加载

  • 子包跳主包 子包运行时，用过渡页加载主包，这样就可以子包使用主包

wpy 多机构、多变量、多条件预处理插件

wepy-plugin-preprocess 静态分析-预编译时，设置全局变量（设置动态机构变量/环境变量） + 判断编译（用于区分多机构/多环境）

preprocess 预编译多机构处理的项目实例

wepy 解析 替换 插件

wepy-plugin-replace

module.exports.plugins = {
'replace': {
filter: /moment.js$/,
config: {
find: /([\w[]a-d.]+)\s*instanceof Function/g,
replace: function (matchs, word) {
return ' typeof ' + word + " ==='function' ";
}
}
}
};

图片服务器

"picServer": "cd miniprogramAssets && http-server -p 8000 --cors"

忽略超过大于 500kb 的文件的编译

npm i wepy-compiler-babel@1.5.3 --save-dev wepy build --no-cache

开发者工具开启 es6->es5 / 打开增强编译 / 压缩混淆 中的一个才会有 sourcemap

微信小程序 Source Map 的使用及一键解析（大全）

https://blog.windstone.cc/articles/wechat-mini-program-sourcemap/

微信小程序 source-map 在线解析工具 https://blog.windstone.cc/tools/wechat-mini-program-sourcemap

客户经理小程序 sourcemap 生成条件： Source Map 微信小程序为了开发者能够根据打包后的 JS 错误位置定位到源码里的错误位置，提供了 Source Map 支持。在开发者工具里若是开启了“ES6 转 ES5”（或“代码压缩”、“增强编译”），在上传代码时会生成 Source Map 文件，方便定位错误位置。

小程序后台获取的 Source Map 压缩包解压后的结构如下：

├── APP
│
└── app-service.map.map
├── FULL
│
└── app-service.map.map
├── sub-package-A
│
└── app-service.map.map
├── sub-package-B
│
└── app-service.map.map
└──
... 
└── app-service.map.map

https://developers.weixin.qq.com/community/develop/article/doc/00068a663482b066b08b1e1375c013

图片替换成前置的设计方案：【未实现】

1、template，转成 ast，读取 image 的 src 的值，取文件名 图片名存缓存，替换为

2、script，判断是否有 import imagesConfig from '@config/imagesConfig'; ​，没有时在最前面加上。

3、读取 class 里 data 的 文件名 图片名 ​ 变量是否存在，没有则创建“新变量”

4、imagesConfig 文件，读取 imagesConfig 里的 imagesUrl 里的 文件名_图片名 ​ 变量是否存在，没有则创建 新变量 ​

包自动拆解：

依赖树收集 每个依赖加一

动态换肤

webpack-plugin 用 css 变量

importDeclaration 解析 import

treeshake：宽松模式

可以去掉未使用，用了已有变量

js 解析：（babel 原理）

parse->transform->generate

解释器执行时间

执行一条语句要花费解释器一定的时间。假设解释器声明一个类要 3ms，声明一个变量要 1ms，声明一个函数要 2ms，可以看到，我们花费了无用的时间来声明一些永远不会使用的东西，这些时间应该用来做更有价值的事。 [关联 tree-shaking]

下载时间

无用代码会让我们下载应用到浏览器时变大，这可不是好的用户体验，尤其是对于那些网速慢的用户。

代码解析出 ast

const ast = acorn.parse(code, options)

webpack，svg 打包成雪碧图优化

关键插件：svg-sprite-loader https://blog.csdn.net/weixin_45746826/article/details/109441185

解析器，loader

解析代码 less，对应 less-loader html，对应 html-loader jsx，对应 babel-loader 注：

  • 解析 less 文件的配置，loader 的顺序有 严格要求。loader 的加载顺序是 倒序，也就是 webpack 会先加载 less-loader ，再加载 css-loader ，最后加载 style-loader
  • less-loader、css-loader、style-loader 三者的工作内容 less-loader : 把 less 代码解析成 css 代码 css-loader : 是解析 css 代码中的 @import ​ 和 url() ​ style-loader : 通过 style 标签将 css 文件插入到 html 文件中

压缩 js 压缩成 min.js

node.js 环境，请安装 uglifyjs，然后使用 npm i -g uglifyjs ​

cd addons/ueditor/assets/
uglifyjs ueditor.js > ueditor.min.js

rollup 打包格式

输入图片说明

https://www.jianshu.com/p/6a7413481bd2

rollup es6 转 es5 ,压缩代码

https://cloud.tencent.com/developer/article/1684338

无用变量构建剔除

编译使用 tree-shaking

多机构代码差异，建议注释构建剔除

预编译阶段处理

wepy 预编译，条件替换/保留

  • 使用场景：多机构
  • wepy 解析替换插件：wepy-plugin-replace
module.exports.plugins = {
    'replace': {
        filter: /moment\.js$/,
        config: {
            find: /([\w\[\]a-d\.]+)\s*instanceof Function/g,
            replace: function (matchs, word) {
                return ' typeof ' + word + " ==='function' ";
            }
        }
    }
};

小程序拆包优化

  • 把公共文件进行拆包。 > 原理： > 依赖树收集，引用时每个节点计数+1

图片替换成前置的设计方案：

  1. template，转成 ast，读取 image 的 src 的值，取文件名_图片名存缓存，替换为
  2. script，判断是否有 import imagesConfig from '@config/imagesConfig'; ，没有时在最前面加上 读取 class 里 data 的文件名 图片名是否存在，没有则创建 文件名 图片名: imagesConfig.文件名_图片名,
  3. imagesConfig，读取 imagesConfig 的 imagesUrl 的文件名 图片名是否存在，没有则创建文件名 图片名 附： httpclient 检查： https://blog.csdn.net/weixin_30514745/article/details/95915838

treeshake

  • 宽松模式
  • 可以自动去掉未使用变量

跨包预加载

  • 子包跳主包 子包运行时，用过渡页加载主包，这样就可以子包使用主包

wpy 多机构、多变量、多条件预处理插件

wepy-plugin-preprocess 静态分析-预编译时，设置全局变量（设置动态机构变量/环境变量） + 判断编译（用于区分多机构/多环境）

preprocess 预编译多机构处理的项目实例

图片服务器

"picServer": "cd miniprogramAssets && http-server -p 8000 --cors"

忽略超过大于 500kb 的文件的编译

npm i wepy-compiler-babel@1.5.3 --save-dev wepy build --no-cache

开发者工具开启 es6->es5 / 打开增强编译 / 压缩混淆 中的一个才会有 sourcemap

微信小程序 Source Map 的使用及一键解析（大全）

https://blog.windstone.cc/articles/wechat-mini-program-sourcemap/

微信小程序 source-map 在线解析工具 https://blog.windstone.cc/tools/wechat-mini-program-sourcemap

客户经理小程序 sourcemap 生成条件： Source Map 微信小程序为了开发者能够根据打包后的 JS 错误位置定位到源码里的错误位置，提供了 Source Map 支持。在开发者工具里若是开启了“ES6 转 ES5”（或“代码压缩”、“增强编译”），在上传代码时会生成 Source Map 文件，方便定位错误位置。

小程序后台获取的 Source Map 压缩包解压后的结构如下：

├── APP │ └── app-service.map.map ├── FULL │ └── app-service.map.map ├── sub-package-A │ └── app-service.map.map ├── sub-package-B │ └── app-service.map.map └── ... └── app-service.map.map https://developers.weixin.qq.com/community/develop/article/doc/00068a663482b066b08b1e1375c013

图片替换成前置的设计方案：【未实现】

1、template，转成 ast，读取 image 的 src 的值，取文件名 图片名存缓存，替换为 2、script，判断是否有“import imagesConfig from '@config/imagesConfig';”，没有时在最前面加上。 3、读取 class 里 data 的“文件名 图片名”变量是否存在，没有则创建“新变量” 4、imagesConfig 文件，读取 imagesConfig 里的 imagesUrl 里的“文件名_图片名”变量是否存在，没有则创建“新变量”

包自动拆解：

依赖树收集 每个依赖加一

动态换肤

webpack-plugin 用 css 变量

importDeclaration 解析 import

treeshake:宽松模式

可以去掉未使用，用了已有变量

js 解析：babel 原理

parse->transform->generate

解释器执行时间

执行一条语句要花费解释器一定的时间。假设解释器声明一个类要 3ms，声明一个变量要 1ms，声明一个函数要 2ms，可以看到，我们花费了无用的时间来声明一些永远不会使用的东西，这些时间应该用来做更有价值的事。 [关联 tree-shaking]

下载时间

无用代码会让我们下载应用到浏览器时变大，这可不是好的用户体验，尤其是对于那些网速慢的用户。

代码解析出 ast

const ast = acorn.parse(code, options)

webpack，svg 打包成雪碧图优化

关键插件：svg-sprite-loader https://blog.csdn.net/weixin_45746826/article/details/109441185

解析器，loader

解析代码 less，对应 less-loader html，对应 html-loader jsx，对应 babel-loader 注：

  • 解析 less 文件的配置，loader 的顺序有 严格要求。loader 的加载顺序是 倒序，也就是 webpack 会先加载 less-loader ，再加载 css-loader ，最后加载 style-loader
  • less-loader、css-loader、style-loader 三者的工作内容 less-loader : 把 less 代码解析成 css 代码 css-loader : 是解析 css 代码中的 @import 和 url() style-loader : 通过 style 标签将 css 文件插入到 html 文件中

压缩 js 压缩成 min.js

node.js 环境，请安装 uglifyjs，然后使用 npm i -g uglifyjs

cd addons/ueditor/assets/ uglifyjs ueditor.js > ueditor.min.js

rollup 打包格式

输入图片说明

https://www.jianshu.com/p/6a7413481bd2

rollup es6 转 es5 ,压缩代码

https://cloud.tencent.com/developer/article/1684338

cssloader extract

是否分离 css 文件

输入图片说明

来自 https://blog.csdn.net/weixin_44869002/article/details/105831757

代码分块、分段方法，如：vendor、app

https://juejin.cn/post/6844903918862860301

包含：css 去除无用的样式

移除 HTML 中的注释

removeComments: true,
// 移除 HTML 中的注释

https://www.cnblogs.com/bbbiu/p/9593854.html

优化指标参考

https://blog.51cto.com/u_15098029/2614600

html 根据环境、动态脚本、动态注入脚本

在 htmlWebpackPlugin 中添加环境变量 env 的配置

new HtmlWebpackPlugin({
    template: './src/public/index.ejs',
    inject: 'body',
    hash: true,
    env: process.env.NODE_ENV
})

在 html 页面中可以这样使用

<% if(htmlWebpackPlugin.options.env == 'production'){ %>
<script src="xxx/react.min.js"></script> 
<script src="xxx/react-dom.min.js"></script> 
<% } else { %>
<script src="xxx/react.development.js"></script>
<script src="xxx/react-dom.development.js"></script>
<% } %>

https://www.cnblogs.com/mengff/p/9815333.html

moment.js 按需加载

去掉英文包，剩下中文包只有 4.3kb，但也是整个中文包，没有做到按需

https://www.jianshu.com/p/60189726237b

更优的替代插件：day.js

仅 2kb 大小的微型库

https://github.com/iamkun/dayjs/blob/HEAD/docs/zh-cn/README.zh-CN.md

day.js 语言包按需引入

https://www.codercto.com/a/66257.html

前端 缓存

只要图片是 base64 我看都是 from memroy cache 。

总结: 解析渲染图片这么费劲的事情，还是做一次然后放到内存吧。 用的时候直接拿

304 缓存

​ js/css/jpg 等文件，是不是没有配置 nginx 相关缓存？

http://www.zuidaima.com/question/1919576544365568.htm

@babel/parser @babel/traverse @babel/generator @babel/types 示例：

https://blog.csdn.net/jennieji/article/details/100839305

babel

var parser = require('@babel/parser');
// 将源代码解析成 AST
var traverse = require('@babel/traverse').default;
// 对 AST 节点进行递归遍历
var generator = require('@babel/generator').default;
// 将 AST 解码回 js 代码 var bableTypes = require('@babel/types');
// 对具体的 AST 节点进行增删改查

js 模块化规范

  • commonjs 同步模式 适用于 node 环境，而浏览器不兼容 CommonJs，原因是浏览器缺少 module、exports、require、global 四个环境变量
  • amd 异步模式 引入工具 require.js
  • cmd 异步模式（就近+按需加载） 引入工具 sea.js

构建优化大全

https://segmentfault.com/a/1190000016816813

脚本工具（大全）

适用于 vue/wepy/react 的项目编译处理。 https://blog.csdn.net/guang_s/article/details/84672449

css tree shaking

purifycss-webpack ：移除没有使用到 css 样式

安装 npm install purifycss-webpack purifycss --save-dev ​

https://blog.csdn.net/weixin_38022998/article/details/103662130

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群
更多

你可能也喜欢

创建 Docker Swarm 集群

修复 passwd:Authentication token manipulation error 的步骤

Maven 中 optional 关键字

Android 的系统架构

使用 CSS 给网站的外链添加背景箭头标识

JavaScript 数据类型转换方法

LESS / Sass 编译工具 Koala 介绍

查看 Linux 内核路由表 以及 route 命令的使用

上一篇：

下一篇：

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

很酷又爱笑

暂无简介

0 文章
0 评论
23 人气
发私信
更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

爱人如己

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

云雾

文章 0 评论 0

倒带

文章 0 评论 0

浮世清欢

文章 0 评论 0

撩起发的微风

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文