web加载优化

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

内容简介：如何提高页面加载性能?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加载优化》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

Web全栈工程师的自我修养

余果 / 人民邮电出版社 / 2015-9-1 / 49.00

全栈工程师正成为 IT 行业的新秀，论是上市互联网公司还是创业公司，都对全栈工程师青睐有加。本书作者是腾讯公司高级工程师，在前端、后端和APP开发方面都有丰富的经验，在本书中分享了全栈工程师的技能要求、核心竞争力、未来发展方向、对移动端的思考。除此之外，本书还详细记录了作者从零开始、学习成长的心路历程。本书内容全面，客观务实，适合互联网行业新人、程序员，以及期待技术转型的从业者阅读参考。一起来看看《Web全栈工程师的自我修养》这本书的介绍吧!

码农工具