tree shaking概念
把应用程序想象成一棵树,把引入的第三方库或者源代码可以理解为绿色的树叶,而没有引入的库和无用的源代码可以理解为灰色的恶枯萎的树叶,tree shaking 这一操作就是为了去除这些灰色的无用的树叶(代码),这样会使我们的代码体积更小,请求速度更快,加载速度也更快。
tree shaking前提条件
- 必须使用ES6模块化;
- 开启production环境:mode: ‘production’,
简单实现
创建demo
项目中新建名为test的js文件,定义两个方法,将两个方法暴露出去:
在indexjs中引入,为了方便说明,只引入其中一个方法:
如上所述,test.js中未引入的方法对于tree shaking 这一操作来说就是灰色的叶子(无用代码),而接下来的打包操作将会去除这些叶子。执行webpack打包,生成文件如下:
可以看到搜索count方法并没有打包进去,这就说tree shaking操作起作用了,但是有个问题,它会将index.js 中引入的css文件也给剔除,因为在package.json文件中sideEffects: false的意思是所有代码都没有副作用,所以需要对sideEffects进行一些配置:
可以将一些不需要tree_shaking的文件后缀作为标记放入此配置中,tree_shaking的操作就不会影响到这些文件了。
最后是webpack的基本配置:
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
process.env.NODE_ENV = 'production';
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// eslint-disable-next-line global-require
require('postcss-preset-env')(),
],
},
},
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true,
},
},
{
oneOf: [
{
test: /\.css$/,
use: [...commonCssLoader],
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader'],
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50',
},
},
],
],
// 开启babel缓存,第二次构建时会读取之前的缓存
cacheDirectory: true,
},
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false,
},
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
exclude: /\.(css|less|js|html|png|jpg|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media',
},
},
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css',
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true,
},
}),
],
mode: 'production',
devtool: 'source-map',
};