椰卤工程师的个人博客

随着项目的不断优化迭代，加入了许多高大上且卷的功能，是相当炫酷了。比方说：Antv 的L7、G2、G6、Echart，集众多优秀的组件于一身（它们真的很大，非常大），固然越走越沉重，是时候减负了！为什么要进行性能优化？这是优化前的一张资源加载图，从上图我们可以获取到那些信息呢？1.3M的资源，加载了9.06s，项目经理看了都流泪35个请求，共2.6M资源，传输无压缩，真是太实在了当然，资源的加载速度和网络带宽是密不可分的，需要运维同学去进行优化了，那我们能做些什么呢？nginx 资源动态

需要在config.js文件中添加配置：config.module.rule('mjs-rule').test(/.m?js).resolve.set('fullySpecified', false);

loader是什么？loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块。以供应用程序使用，以及被添加到依赖图中。loader 本质上是导出为函数的 JavaScript 模块。在 webpack 使用过程中，经常会出现以下两种形式：在 webpack.config.js 配置文件中，去根据文件匹配信息，去配置 loader 相关信息；是在 loader / plugin 中去修改、替换、生成的行内 loader 信息。// webpack.config.js

webpack 的常用插件html-webpack-plugin： 将一个页面模版打包到dist目录下，默认都是自动引入js 和 cssconst HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './index.html', // 以咱们本地的index.html文件为基

webpack零配置是很弱的，特定的需求，总是需要⾃己进行配置。webpack有默认的配置文件，叫 webpack.config.js ，我们可以对这个⽂件进⾏修改，进⾏个性化配置。使⽤默认的配置文件:webpack.config.js不使用自定义配置文件: 比如webpackconfig.js，可以通过-- config webpackconfig.js来指定webpack使⽤哪个配置文件来执行构建webpack.config.js 配置基础结构：module.exports = { e

【webpack教程一】如何快速上手安装webpack并执行构建简介webpack 是基于nodejs的一个打包构建的工具webpack 是一个打包模块化的js工具，从入口模块开始，识别代码中的模块导入语句，如import，通过递归的方式找出入口文件汇总所有的依赖，然后把这些依赖包一并打包到一个单独的文件中。最核心的特点在于：工程化+自动化（为你省事）安装1、环境准备nodejs：https://nodejs.org/en/建议下载最新LTS稳定版（不要安装current版本），便于提升

前端优化是每个前端工程师必须处理的事情，优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。前端里面包含的内容是丰富的，包括HTML，CSS以及JS和图片等各种各样的资源。因此前端优化是复杂的和必要的，下面总结一些优化的方法，可能不太全面，欢迎指正。CSS压缩关于css压缩是通过Webpack使用插件：optim...