当前位置： 移动技术网 > IT编程>网页制作>CSS > Tree-shaking的使用实例

Tree-shaking的使用实例

2018年04月02日  | 移动技术网IT编程  | 我要评论

绝世唐门燃文,陈冠霖图片,清远汽车站

Tree-shaking 字面意思就是 摇晃树， 其实就是去除那些引用的但却没有使用的代码。

Tree-shaking 概念最早由Rollup.js 提出，后来在webpack2中被引入进来，但是这个这一特性能够被支持得益于ES6 modules的静态特性。ES6的模块声明相比于传统CommonJS的同步require有着本质区别。这种modules设计保证了依赖关系是提前确定的，使得静态分析成为了可能，与运行时无关。

并且webpack中并没有直接对tree shaking 的配置，需要借助uglifyjs-webpack-plugin

实例代码:

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new UglifyJSPlugin()
  ]
}

记住，如果使用babel的话，需要关闭babel的modules配置

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new UglifyJSPlugin()
  ]
}

“modules”: false 的含义是关闭 Babel 的模块转换功能，保留原本的 ES6 模块化语法。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网