浅析webpack 如何优雅的使用tree(2)

const path = require('path'); const webpack = require('webpack'); module.exports = { entry:'./src/scripts/main.js', output:{ filename:'main.bundle.js', path:path.join(__dirname,'dist') }, plugins:[ new webpack.optimize.UglifyJsPlugin(), // <----------- 压缩js new webpack.HotModuleReplacementPlugin() ], devServer:{ port:4200, historyApiFallback:true, hot:true, contentBase:path.join(__dirname,"dist/") } }

然后我们webpack打包

即看到同样的效果

function(e,n,r){"use strict";function t(){alert("hello")}r.d(n,"a",function(){return t})}]);

在tree-shaking触发打包后，仅仅是撇开了模块的引用，但还是要结合压缩工具来进行，这才是完整的一次tree-shaking

那如果是typescript该怎么使用tree-shaking呢？

3.如何在typescript里使用tree-shaking

要在webpack里使用ts，首先我们必须安装tsc

npm install --save-dev typescript

之后我们需要解析ts文件的loader

npm install --save-dev ts-loader

然后在webpack.config.js进行配置

const webpack = require('webpack') const path = require('path')

module.exports = { entry:'./src/scripts/main.ts', output:{ path:path.resolve(__dirname,'dist/'), filename:'main.bundle.js' }, module:{ rules:[ { test:/\.ts$/, use:['ts-loader'] } ] }, plugins:[ new webpack.optimize.UglifyJsPlugin(), new webpack.HotModuleReplacementPlugin() ], devServer:{ port:4200, contentBase:path.resolve(__dirname,'dist/'), historyApiFallback:true, hot:true } }

献上我的两份文件main.ts , greeter.ts （这两份文件除了后缀名基本没有改动）

main.ts

import { sayHello } from './greeter.ts'; sayHello();

greeter.ts

export var sayHello = function(){ alert('hello') } export var sayWorld = function(){ alert('world') }

之后我们需要做的是，创建一个tsconfig.json的配置文件供tsc解析，这时，坑来了。

下面是我的tsconfig.json文件

{ "compilerOptions":{ "target":"es5", "sourceMap":true }, "exclude":[ "./node_modules" ] }

好像没有什么不对

接着我们webpack

看下打包压缩后的代码的最后一部分：

"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.sayHello=function(){alert("hello")},n.sayWorld=function(){alert("world")}}]);

sayWorld居然还是存在！！！怎么回事，为什么没有被触发tree-shaking优化？

这是因为tsc编译后的代码为es5 ，而正因如此，tsc默认使用了commonJS的规范来加载模块，因此并没有触发tree-shaking，那我们要怎么做？

修改一下tsconfig.json，把target改为es6即可！

{ "compilerOptions":{ "target":"es6", "sourceMap":true }, "exclude":[ "./node_modules" ] }

再次打包

看一下打包后的bundle

function(e,n,r){"use strict";r.d(n,"a",function(){return t});var t=function({alert("hello")}}]);

果然是触发了tree-shaking

开启webpack-dev-server

webpack-dev-server

可以看到成功打印hello

以上就是我对webpack tree-shaking的总结，希望对大家的学习有所帮助

您可能感兴趣的文章: