webpack的深入学习与实战(持续更新)

一、何为Webpack

Webpack是 一个开源的JavaScript模块打包工具,其最核心的功能是解决模块之间的依赖,把各个模块按照特定的规则和顺序组织在一起,最终合并为一个JS文件或多个。

二、带宽的换算

目前我们的云服务器带宽为5M

三 、bundle 体积监控工具

1、VS Code中的插件Import Cost

可以帮助我们对引入模块的大小进行实时检测,或者只考虑引用其中的某些子模块


2、webpack-bundle-analyzer

它能够帮助我们分析一个bundle的构成

效果:

安装:

c 复制代码
npm install --save-dev webpack-bundle-analyzer

实现代码:

c 复制代码
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      config.plugins.push(new BundleAnalyzerPlugin());
    }
  }
};

当你运行 vue-cli-service serve 时,Vue CLI 会将 process.env.NODE_ENV 设置为 "development",当你运行 vue-cli-service build 时,Vue CLI 会将 process.env.NODE_ENV 设置为 "production"。在这两种情况下,process.env.NODE_ENV 的值都是由 Vue CLI 设置的。Vue CLI 会根据用户执行的命令来决定是设置为开发模式还是生产模式。

你也可以在脚本中设置:

c 复制代码
"scripts": {
  "build": "NODE_ENV=production vue-cli-service build"
}

四、优化
1、script 标签中添加属性defer="defer"

如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)

如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行

如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

相关推荐
前端缘梦1 小时前
从源码到dist:拆解Webpack如何完成前端工程的"基因编译"
前端·webpack
一个很帅的帅哥1 小时前
Webpack 和 Vite 的关键区别
前端·webpack·前端框架·node.js
LBJ辉1 天前
2. Webpack 高级配置
前端·javascript·webpack
索西引擎2 天前
【工程化】浅谈前端构建工具
前端·webpack·gulp·turbopack
随心点儿5 天前
vue2 webpack 部署二级目录、根目录nginx配置及打包配置调整
前端·nginx·webpack·根目录·二级目录
ZzMemory5 天前
一文分清前端常用包管理器以及构建工具
前端·面试·webpack
炫饭第一名6 天前
Vue 2.5.16 + Webpack 4 升级 Vue 2.7.16 + Webpack 5 记录
前端·vue.js·webpack
断竿散人8 天前
前端救急实战:用 patch-package 解决 vue-pdf 电子签章不显示问题
前端·webpack·npm
Jokerator9 天前
Webpack插件开发深度指南:从原理到实战
webpack
Komorebi_999911 天前
webpack相关
前端·webpack·node.js