web加载优化

栏目: CSS · 发布时间: 5年前

内容简介：如何提高页面加载性能?http2 为什么特殊，资源为啥不用捆绑打包？在 HTTP/1 中：

如何提高页面加载性能?

网页性能分析工具

Lighthouse

PageSpeed

如何提高网页加载性能

网页主要在处理文本字符串

Minify Your Code 压缩清理空格等减小文本体积
Compress Text Resources (Gzip)
减少库的使用

图片资源处理

移除不必要的图片 (是否真正的需要图片?)
选择合适的图片类型
清除图片元数据（拍着日期，地点，设备等）
如有必要，调整图片尺寸
压缩

合并文本资源(从 http 请求角度考虑,暂不考虑 http2)

合并 css 文件（css 是什么？层叠样式表，所以合并注意层叠覆盖现象）
合并 js 文件(js 作用域问题，存在和 css 同样的问题)
内联 js 和 css 文件
调整资源加载优先级

<!-- 预加载 (提高资源请求优先级)-->
<link rel="preload" as="script" href="xxx.js">
<link rel="preload" as="style" href="xxx.css">

<!-- 预连接 (提前简历http请求连接,做好资源提取准备工作)-->
<link rel="preconnect" href="https://example.com">

<!-- 预提取 （非关键操作更早发生）-->
<link rel="prefetch" href="other.html">

http2 为什么特殊，资源为啥不用捆绑打包？

复用请求连接
服务器主动推送资源到浏览器

在 HTTP/1 中：

浏览器请求 HTML 文件。

服务器返回 HTML 文件，然后浏览器开始解析。

浏览器遇到

标记，启动对样式表的新请求。

浏览器接收样式表。

http 缓存

Cache-control & Expires

网页构建绘制

协调好 html css javascript 三者依赖关系

webpack 优化加载速度

1.减小生产环境资源文件大小

从两个方面处理：

减小打包文件 bundle 大小
启用 mode 为 production 即可，也可通过 optimization 增加自定义配置
webpack3 需要 UglifyJsPlugin
从 loader 加载器着手处理
比如：

/* comments.css */
.comment {
  color: black;
}

构建压缩后：

// 这里为什么没有压缩呢？
(exports = module.exports = __webpack_require__(1)()),
  exports.push([module.i, '.comment {\r\n  color: black;\r\n}', '']);

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { minimize: true } },
        ],
      },
    ],
  },
};

2.声明构建环境 Evn 变量

第三方库文件会依赖此条件判断

process.env.NODE_ENV = production;

3. 启用 ES modules

压缩的时候会清除没有使用的代码

const render = () => {
  return 'Rendered!';
};
/* harmony export (immutable) */ __webpack_exports__['a'] = render;
const commentRestEndpoint = '/rest/comments';
/* unused harmony export commentRestEndpoint */

4. images 优化

url-loader 内联 base64

5. 优化依赖库

webpack 相关优化插件文档

比如：lodash.js Moment.js

babel - plugin - lodash;
moment - locales - webpack - plugin;

6. 选择启用 externals 选项

启用 externals，从 cdn 加载

7. webpack mode

// webpack.production.config.js
module.exports = {
+  mode: 'production',
- performance: {
-   hints: 'warning'
- },
- output: {
-   pathinfo: false
- },
- optimization: {
-   namedModules: false,
-   namedChunks: false,
-   nodeEnv: 'production',
-   flagIncludedChunks: true,
-   occurrenceOrder: true,
-   sideEffects: true,
-   usedExports: true,
-   concatenateModules: true,
-   splitChunks: {
-     hidePathInfo: true,
-     minSize: 30000,
-     maxAsyncRequests: 5,
-     maxInitialRequests: 3,
-   },
-   noEmitOnErrors: true,
-   checkWasmTypes: true,
-   minimize: true,
- },
- plugins: [
-   new TerserPlugin(/* ... */),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-   new webpack.optimize.ModuleConcatenationPlugin(),
-   new webpack.NoEmitOnErrorsPlugin()
- ]
}

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- devtool: 'eval',
- cache: true,
- performance: {
-   hints: false
- },
- output: {
-   pathinfo: true
- },
- optimization: {
-   namedModules: true,
-   namedChunks: true,
-   nodeEnv: 'development',
-   flagIncludedChunks: false,
-   occurrenceOrder: false,
-   sideEffects: false,
-   usedExports: false,
-   concatenateModules: false,
-   splitChunks: {
-     hidePathInfo: false,
-     minSize: 10000,
-     maxAsyncRequests: Infinity,
-     maxInitialRequests: Infinity,
-   },
-   noEmitOnErrors: false,
-   checkWasmTypes: false,
-   minimize: false,
- },
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.NamedChunksPlugin(),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

8. 利用资源缓存

# Server header
Cache-Control: max-age=31536000
filename: 'bundle.[chunkhash].js',

// 解决 runtime 运行时 和依赖块，防止源文件更改导致 第三方依赖的hash也会发生改变
optimization: {
    runtimeChunk: true,
}

部分 js 文件可内嵌到 html 文件里

懒加载

以上所述就是小编给大家介绍的《web加载优化》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

WebKit技术内幕

朱永盛 / 电子工业出版社 / 2014-6 / 79.00元

《WebKit技术内幕》从炙手可热的HTML5 的基础知识入手，重点阐述目前应用最广的渲染引擎项目——WebKit。不仅着眼于系统描述WebKit 内部渲染HTML 网页的原理，并基于Chromium 的实现，阐明渲染引擎如何高效地利用硬件和最新技术，而且试图通过对原理的剖析，向读者传授实现高性能Web 前端开发所需的宝贵经验。《WebKit技术内幕》首先从总体上描述WebKit 架构和组......一起来看看《WebKit技术内幕》这本书的介绍吧!

码农工具