使用 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 提升生产环境下构建速度的一种手段。

0
0

慕无忌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;
   });
}

0
0

四大维度解锁Webpack3.0前端工程化

前端开发标配,灵活掌握Webpack3.0的使用可以极大的提高前端开发的效率

1188 学习 · 403 问题

查看课程