性能优化
关注
分享
扫一扫
文章平均质量分 83
曾皙
加油
展开
-
webpack学习篇-性能优化
我们的目标如下： 开发环境性能优化 1.优化打包速度 HMR(热模块替换) 2.优化代码调试 source-map 生产环境性能打包 1.优化代码打包速度 oneof：提高loader的匹配效率 babel缓存，判断是否以及打包过 多进程打包 externals（外部扩展）：他可以规定那个文件不需要打包，从而让期通过CDN引入 dll：动态链接库，防止某一些引用库的多次引用，从而导致多次打包 2.优化代码运行性能 缓存 tree-shaking code split （代码分割）原创 2021-03-12 11:10:27 · 1002 阅读 · 0 评论 -
webpack学习总结-生产环境
要求上线的代码稳定（js，css的兼容处理），运行速度块（将css改为单独文件用link引入），传输速度块（代码压缩） 提取css成单独文件 下载 引入mini-css-extract-plugin 文件 mini-css-extract-plugin 将取代style-loader，作用：提取js中的css代码为单独文件（一个），防止html太大，所以弊端就是css文件太大了（如果是单入口，所以vue中用了自己的vue-style-loader来防止css全部聚焦在一起） const { re.原创 2021-03-11 17:40:32 · 281 阅读 · 0 评论 -
webpack学习总结-开发环境
首先我们的目标，可以让代码运行，对代码调试的时候方便一些 基础配置 创建webpack.config.js const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。 module.exports = { entry: './src/js/index.js', // 入口文件 // 输出配置 output: { filename: './built.js', // 输出文件名 path: resolve(__d原创 2021-03-11 15:06:24 · 341 阅读 · 0 评论 -
webpack基础介绍
自我学习，自我总结 wbpack 是什么 webpack是一种前端的资源构建工具，一个静态模块打包器（module bundler）。 在webpack看来，前端的所有资源文件（js/json/css/img/less/。。。）都应该作文模块处理 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle） Wbpack的核心概念 Entry 入口（entry）指示webpack以哪一个文件为入口起点开始打包，分析构建内部依赖图 output 输出（output）指示we原创 2021-03-11 11:18:18 · 255 阅读 · 0 评论 -
性能工具的使用
使用 Chrome 发现内存泄漏 <body> <!-- 1. 一直添加DOM导致内存泄漏 --> <div id="nodes"></div> <script> var x = []; // 2. 全局变量 不会被回收 function createSomeNodes() { var div, i = 100, frag = document.createDocu原创 2021-02-27 23:41:27 · 470 阅读 · 0 评论 -
从输入 URL 到页面展示发生了什么？
从输入 URL 到页面展示发生了什么？ “在浏览器里，从输入 URL 到页面展示，这中间发生了什么？ ”这是一道经典的面试题，能比较全面地考察应聘者知识的掌握程度，其中涉及到了网络、操作系统、Web 等一系列的知识。 今天就结合下图对这个过程进行分析。当然实际过程还远比这张图复杂得多。 一、用户输入 用户输入查询关键字后，地址栏会判断输入的关键字是搜索内容还是请求的 URL。 如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成带关键字的 URL。 如果输入内容符合 URL 规则，地址栏原创 2021-02-26 11:30:22 · 1599 阅读 · 0 评论