Tree Shaking

生产环境去除没有使用到的内容（开发环境没有删除，会影响调试）
只支持ESM规范（静态引入，编译时引入），不支持CJS（动态引入，执行时引入）

// webpack.config.js
// 和devServer同级
// 开发环境会自动加上，可不写
optimization:{usedExports: true
}

由于@babel/polyfill并没有export而是在window上挂载，因此不应当检查shaking
对于没有导出内容的都应该忽略

// package.json
"sideEffects": ["@babel/polyfill", "*.css"]

不同的打包模式

不同环境有对应的配置文件
npm install webpack-merge-D 安装精简工具
通常将webpack配置文件放在build文件夹下
package.json

{"scripts": {"dev": "webpack-dev-server --config ./build/webpack.dev.js","build": "webpack --config ./build/webpack.prod.js","dev:build": "webpack --config ./build/webpack.dev.js"},"devDependencies": {"@babel/cli": "^7.14.8","@babel/core": "^7.15.0","@babel/preset-env": "^7.15.0","babel-loader": "^8.2.2","clean-webpack-plugin": "^4.0.0-alpha.0","core-js": "^3.8.3","html-webpack-plugin": "~3.2.0","lodash": "^4.17.21","webpack": "~4.41.5","webpack-cli": "~3.3.10","webpack-dev-server": "~3.10.1","webpack-merge": "^5.8.0"}
}

webpack.base.js

const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin")module.exports = {entry: path.resolve(__dirname, "../src/index.js"),output: {path: path.resolve(__dirname , "../dist"),filename: "js/[name].js",},module: {rules: [{test: /\.js$/,use: {loader: 'babel-loader',// options: {//     plugins: [['@babel/plugin-transform-runtime', {//         absuluteRuntime: false,//         corejs: 3,//         helpers: true,//         regenerator: true,//         useESMoudles: false,//         version: '7.0.0-beta.0'//     }]]// }},exclude: path.resolve(__dirname, 'node_modules')},]},plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: path.resolve(__dirname, "../src/index.html"),excludeChunks: ['node_modules']}),new CleanWebpackPlugin(),],
};

webpack.dev.js

// 设置热更新
const webpack = require('webpack')const { merge } = require('webpack-merge')
// 公共配置
const baseConfig = require('./webpack.base')// 开发环境特有的配置
const devConfig = {mode: 'development',devtool: 'cheap-module-eval-source-map',plugins: [new webpack.HotModuleReplacementPlugin(),],devServer: {open: true,host: "localhost",port: 3333,proxy: {'/api': {target: 'http://study.jsplusplus.com',secure: false, // 如果target是https的pathRewrite: {'^/api': ''},changeOrigin: true}},hot: true,}
};
module.exports = merge(baseConfig, devConfig)

webpack.prod.js

const { merge } = require('webpack-merge')
// 公共配置
const baseConfig = require('./webpack.base')// 生产环境特有的配置
const prodConfig = {mode: 'production',devtool: 'cheap-module-source-map',
};module.exports = merge(baseConfig, prodConfig)

Webpack进阶（一） tree shaking与不同mode相关推荐

webpack构建中tree shaking、scope Hoisting（面试题）
一.tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的方法打到 ...
webpack中的tree shaking(树摇)-----移除未使用的代码
本篇大致概括一下tree shaking的作用以及与webpack相结合使用什么是tree shaking 引用webpack官网的原文来说: tree shaking 是一个术语,通常用于描述移除 ...
demo10 关于JS Tree Shaking
1.什么是 tree shaking 借助于 es6 (es2015) 模块系统 (import 和 export) 的静态解析,webpack 能够利用 Tree Shaking 进行按需加载,移除 ...
webpack学习(四) -- css tree shaking
css tree shaking 我们和webpack(三)一样,用案例说话安装css需要的两个loader,css-loader 和style-loader npm install css-loa ...
Webpack 实现 Tree shaking 的前世今生
作者 | 左琳责编 | 欧阳姝黎前言如果看过 rollup 系列的这篇文章 - 无用代码去哪了?项目减重之 rollup 的 Tree-shaking,那你一定对 tree-shak ...
webpack高级应用篇（九）：tree shaking（usedExports）与 sideEffects
目录 tree shaking(usedExports) tree shaking 前 tree shaking 后 sideEffects(副作用) 解释 tree shaking 和 `sideE ...
Webpack Tree Shaking
Tree Shaking tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code).它依赖于 ES2015 模块语法的静态结构特性, ...
Webpack之Tree Shaking与Scope Hoisting
Webpack之Tree Shaking与Scope Hoisting 一.Tree Shaking 二.webpack中使用Tree-shanking 三.Scope Hoisting 一.Tree ...
Webpack进阶（三）
懒加载 lazy loading 用到的时候才加载 vue 首屏不加载 index.js const oBtn = document.getElementById('j-button') oBtn.o ...

Webpack进阶（一） tree shaking与不同mode

Tree Shaking

不同的打包模式

Webpack进阶（一） tree shaking与不同mode相关推荐

最新文章

热门文章