使用 tree shaking 无法去除无用代码,使用的是webpack4
来源:3-15 由浅入深 webpack - Tree-shaking - JS Tree-shaking

慕无忌6890528
2018-05-30
app.js 中的代码设置:
/* JS tree-shaking 使用放的示例: */
import {utila} from "./common/util";
console.log(utila());
webpack.config.js 文件中的设置:
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
{
test: /\.js$/,
// include: __dirname+"./src/",
use: {
loader : 'babel-loader',
options: {
presets: [
[ '@babel/preset-env',{
modules:false,
targets: {
browsers:['> 1%','last 2 versions'],
}
}]
],
plugins: [//解决webpack.4 异步加载模块的问题。
"syntax-dynamic-import",
],
exclude: '/node_modules/'
}
},
},
{ //提取 css 代码
test:/\.less$/,
use: ExtractTextWebpackPlugin.extract({//提取我们的css样式
fallback: {
loader: "style-loader",
options: {
singleton: true,
transform: './css.transform.js'
}
},
use:[//我们这里继续使用 use,使用 css 相关的loader,来处理我们的先关 css 文件
{
loader : 'css-loader',
options: {
modules:true, //引用 css 模块
localIdentName: '[path][name]_[local]--[hash:base64:5]',
}
},
/* 使用 postcss */
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-cssnext')({ browsers: ['> 1%','last 2 versions'] })
]
}
},
{
loader : 'less-loader'
}
]
})
},
plugins: [
/* 提取 css 代码 */
new ExtractTextWebpackPlugin({
filename:'[name].gd.css',//异步加载文件打包以后的css文件名
allChunks:true,//这里设置为 false 的时候打包的 js 文件会有一个报错。
}),
/* JS tree-shaking 使用放的示例 */
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
beautify: false,
},
toplevel: false,
}
}),
],
}
2回答
-
testname
2018-08-11
webpack 4 中不在需要设置额外的步骤来对 JS 做 tree-shaking 操作,只需要设置 mode 为 production ,并且打开 minimize 即可,webpack 会自动帮你 tree-shaking
如果在生产环境下,是没有办法做 tree-shaking 的,这个可能也是 webpack 提升生产环境下构建速度的一种手段。
00 -
慕无忌6890528
提问者
2018-05-30
打包后的文件显示(其中的一部分):
/***/ function(t, n, r) {
"use strict";
//app.js 入口文件会依赖 util.js 文件中的某一个方法;但是 util.js 文件中会有许多的方法。
function e() {
return "this is utila";
}
function o() {
return "this is utilb";
}
function i() {
return "this is utilc";
}
function u() {
return "this is utild";
}
function c() {
return "this is utile";
}
/***/ r.r(n),
/* harmony export (binding) */ r.d(n, "utila", function() {
return e;
}),
/* harmony export (binding) */ r.d(n, "utilb", function() {
return o;
}),
/* harmony export (binding) */ r.d(n, "utilc", function() {
return i;
}),
/* harmony export (binding) */ r.d(n, "utild", function() {
return u;
}),
/* harmony export (binding) */ r.d(n, "utile", function() {
return c;
});
}00
相似问题