webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。

webpack:

plugins:[
 new webpack.optimize.UglifyJsPlugin({
  compress:{warning:true}
 })
]

  是的,一些dead code 在打包后会被移除.比如没用的varible ,function。

但是classes会被UglifyJs作为side effect,然后跳过它。

我的TypeScript配置tsconfig.json :

compilerOptions:{
   target:‘es5‘,
   module:‘es2015‘
  .....
}

所以~

typescript=>es5 bundle =>UglifyJs

通过这条途径,classes是不会被删除的。

typescript=>es6 bundle =>UglifyJs

这条途径不行,UglifyJs不支持直接处理ES6文件。

------------------------------------------

好吧,搞了很久,我才找到babel为webpack提供了babili-webpack-plugin这么一个插件。

于是用它直接替换 UglifyJs就好了:

npm install babili-wepback-plugin -save-dev    //   babel-core >= 6.19.0

npm install [email protected]

plugins:[
  new require(‘babili-webpack-plugin‘)()
]

当然,tsconfig.json中target得设置为es2015(按es5输出,classes还是会存在)。

如此才是真正的tree shaking。

不过得到的是es6文件,也就是还得转一次es5。 - -!

时间: 2024-12-20 09:41:41

webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。的相关文章

[Webpack 2] Tree shaking with Webpack 2

The less code you can send to the browser, the better. The concept of tree shaking basically says that if you’re not using some piece of code, then exclude it from the final bundle, even when that piece of code is exported from a module. Because ES6

Webpack 的 Tree Shaking

为什么要使用 Tree Shaking? 当从某文件模块中导出(某一个或几个变量.函数.对象等),然而这个文件模块还有许多其它(我们这次并不需要)的导出,webpack会不管三七二十一简单粗暴的将整个模块包含进来,使得我们最终打包的文件里有了许多不需要的垃圾.这就到了tree shaking出手的地方了,因为它能帮助我们干掉那些用不到的代码,大大减少打包的尺寸. 要想让tree shaking能"摇起来",有几个要求: 第一个要求,必须使用ES6模块,不能使用其它类型的模块如Commo

The way of Webpack learning (V.) -- css和js的tree shaking

一:基本概念 1.字面意思是摇树,一句话:项目中没有使用的代码会在打包时候丢掉.分为css的tree shaking和js的tree shaking. 2.使用场景:1)常规优化.2)使用第三方库,但是只使用了部分功能. 二:JS tree shaking 在webpack4中已经移除了UglifyJsPlugin,只需要配置mode为"production",即可显式激活 UglifyjsWebpackPlugin 插件. 下面说的是webpack3.10.0的实现方法: (1)常规

webpack4 系列教程(八): CSS Tree Shaking

教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示): >>> 本节课源码 >>> 所有课程源码 1. CSS 也有 Tree Shaking? 是滴,随着 webpack 的兴起,css 也可以进行 Tree Shaking: 以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码. 为了方便理解 Tree Shaking 概念,并且与 JS

Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)

概述 Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loading就没法搞了. 因此我使用了webpack2,webpack2自带tree shaking,只要将tsconfig中的module设置成es2015就可以, 虽然效果没rollup好,但支持lazy loading. 另外, angular2目前不支持typescript 2.1.X,所以如果

webpack 教程资源收集

学习的过程中收藏了这些优秀教程和的项目,希望对你有帮助. github地址, 有不错的就更新 官方文档 中文指南  初级教程 webpack-howto 作者:Pete Hunt Webpack 入门指迷 作者:题叶  webpack-demos 作者:ruanyf 一小时包教会 —— webpack 入门指南 作者:VaJoy Larn webpack 入门及实践 作者:zhouweicsu Webpack傻瓜式指南(一) 译者:前端外刊评论 Webpack傻瓜式指南(二) 译者:前端外刊评论

webpack 教程资源目录

初级教程 webpack-howto 作者:Pete HuntWebpack 入门指迷 作者:题叶 webpack-demos 作者:ruanyf一小时包教会 -- webpack 入门指南 作者:VaJoy Larn webpack 入门及实践 作者:zhouweicsu Webpack傻瓜式指南(一) 译者:前端外刊评论 Webpack傻瓜式指南(二) 译者:前端外刊评论 入门Webpack,看这篇就够了 作者:zhangwang webpack入门和实战(一):webpack配置及技巧 作

webpack性能优化总结

一.缩小文件的搜索范围 优化Loader配置使用配置项include与exclude尽可能高概率命中文件,减少webpack匹配文件的时间.我们可以适当的配置项目的结构目录. module.exports = { module: { rules: [{ test: /\.js?$/, include: path.resolve(__dirname, 'app'), use: { loader: 'babel-loader?cacheDirectory', options: { presets:

vue-quill-editor 富文本集成quill-image-extend-module插件实例,以及UglifyJsPlugin打包抱错问题处理

官网 vue-quill-editor Toolbar Module - Quill vue-quill-image-upload 图片支持上传服务器并调整大小 1.在 package.json 中加入 "quill-image-extend-module": "^1.1.2" 依赖 2.在编辑器组件中引入以下代码 <template> <div class="in-editor-panel"> <quill-edi