精华内容
下载资源
问答
  • webpack的tree shaking util.js export const a = () => { console.log("a123456方法"); }; export const b = () => { console.log("b123456方法"); }; main.js import {a} from './utils'; a(); side...
  • 主要介绍了webpack4 CSS Tree Shaking的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了浅谈Webpack4 Tree Shaking 终极优化指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了webpack 如何使用tree-shaking(摇树优化),本文介绍了什么是tree-shaking,commonJS 模块,es6 模块,怎么使用tree-shaking等,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
  • Vue 3 | 万物皆可 TreeShaking

    千次阅读 2020-07-21 18:20:41
    关于 TreeShaking 这件事情,官方已经强调无数次了,我也在之前的文章中有提到,原因就是 Vue 团队希望能帮助开发者减小 Web 应用的体积。什么是 TreeShakingT...

    关于 TreeShaking 这件事情,官方已经强调无数次了,我也在之前的文章中有提到,原因就是 Vue 团队希望能帮助开发者减小 Web 应用的体积

    什么是 TreeShaking 

    TreeShaking 是一个术语,指的是在打包构建过程中移除没有被引用到的代码,这些代码可以成为 dead code。这个概念最早在基于 ES6 的打包工具 Rollup 中提出,后来被引入到 webpack 中。TreeShaking 比较依赖于 ES6 模块系统的静态结构特性,比如 importexport

    Vue 2.x 的全局 API 

    举个比较常见的例子,如果你在 Vue 的应用中主动操作过 DOM,大概率会写下:

    import Vue from 'vue';
    Vue.nextTick(() => {
      // 和 DOM 有关的一些操作
    });
    

    其实在单个的 Vue 实例中也可以使用这个方法:$nextTick,这不过是 Vue 2.x 版本中方便开发者的一种做法,这个函数的本质依然是 Vue.nextTick

    假如你没有用到 Vue.nextTick 这个方法,或者你更喜欢用 setTimeout 来代替,这样的话 Vue 中 nextTick的部分将会变成 dead code —— 徒增代码体积但从来不会被用到,这对于客户端渲染的 web app 来说是拖累性能的一大因素。

    诸如 webpack 的模块构建工具是支持 TreeShaking 的,但很不幸的是,Vue 2.x 的全局 API 比如 nextTick 无法被 TreeShake,所以就算你没有用到这些 API,它们还是会被打包到你的生产版本的代码包里(无奈)。

    Vue 3.x 的全局 API 

    在 Vue 3 中,官方团队重构了所有全局 API 的组织方式,让所有的 API 都支持了 TreeShaking。所以,当开发者在 Vue 3 中使用全局 API 时,需要主动将其导入到目标文件中,比如上面的例子,需要改写成:

    import { nextTick } from 'vue';
    
    nextTick(() => {
      // 和 DOM 有关的一些操作
    });
    

    如果你在 Vue 3 中调用 Vue.nextTick() ,会得到一个很无情的报错:undefined is not a function

    受到影响的 API 

    • Vue.nextTick

    • Vue.observable(被 Vue.reactive 替换)

    • Vue.version

    • Vue.compile

    • Vue.set(兼容版本)

    • Vue.delete(兼容版本)

    如果你希望得到更详细的信息,请移步至官方文档(目前还没有中文版):https://v3.vuejs.org/guide/migration/global-api-treeshaking.html#_2-x-syntax

    展开全文
  • Tree Shaking概念详解

    千次阅读 2020-09-28 11:13:57
    Tree Shaking 值的就是当我引入一个模块的时候,我不引入这个模块的所有代码,我只引入我需要的代码,这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。 官方有标准的说法:Tree-shaking的本质...

    Tree Shaking 值的就是当我引入一个模块的时候,我不引入这个模块的所有代码,我只引入我需要的代码,这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。

    官方有标准的说法:Tree-shaking的本质是消除无用的js代码。无用代码消除在广泛存在于传统的编程语言编译器中,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为DCE(dead code elimination)

    在 webpack 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况中,虽然依赖了某个模块,但其实只使用其中的某些功能。通过 Tree-Shaking,将没有使用的模块摇掉,这样来达到删除无用代码的目的。

    在production 模式下不用在webpack.config.js中配置

    optimization: {
    usedExports: true

    }
    当在development模式下配置tree shaking时:
    webpack.config.js

    //HtmlWebpackPlugin
    //当我们整个打包过程结束的时候,自动生成一个html文件,
    //并把打包生成的自动引入到html这个文件中;
     
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    const path = require('path')
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    const webpack = require('webpack')
    module.exports = {
        //打包模式,当为‘production’,打包后的文件会被压缩,
        //当为‘development’时打包后的文件不会被压缩,按照开发环境进行打包
        mode: 'development', //在开发者模式中SourceMap默认已经被配置在项目里了。
        // devtool: 'none', //关闭SourceMap
        //cheap:在生成SourceMap的时候,可以不带列信息,只带行信息,不要包含loader里面的SourceMap的生成,
        //只对业务代码进行SourceMap的生成
        //module:对loader里面的代码也进行一个SourceMap的生成
        //eval:eval是一种执行方式
        devtool: 'cheap-module-eval-source-map', //打开SourceMap
        // devtool: 'cheap-module-source-map', //要线上的代码可以映射
        // 打包的入口文件
        entry: './src/index2.js',
        // entry: {
        //     main: './src/index2.js'
        // },
        devServer: {
            contentBase: './dist', //我们要在哪一个目录下去启动这个服务器
            open: true, //会自动的打开一个浏览器,然后自动访问服务器的地址(localhost:8080)
            hot: true, //指是否支持热更新(hmr)
            hotOnly: true, //即使不支持hmr或者hmr有问题,也不刷新浏览器
            proxy: {
                '/api': {
                    //当访问localhost:8080/api的时,它会直接帮你转发到http://localhost:3000
                    target: 'http://localhost:3000',
                    pathRewrite: { '^/api': '' }
                }
            }
        },
        module: {
            rules: [{
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader'
                },
                {
                    test: /\.(png|jpg|gif)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            //url-loader会把图片转化成一个base64的字符串,
                            //然后直接放到bundle.js里,而不是单独生成一个图片文件,
                            //好处:不用再额外的请求图片的地址,省了一次http请求;
                            //缺点:如果图片特别大过大,打包生成的js文件就会很大,
                            //那么加载js文件的时间就会很长,所以在一开始很长的时间里,页面上什么都显示不出来;
                            //所以,url-loader最佳的使用方式:加一个limit
                            //如果图片小于limit的值就把图片变为一个base64的字符串放到打包好的js中,
                            //若大于limit的值,就以file-loader的生成一个图片放到dist目录下。
                            limit: 8192, //好处是可以对小图片的http请求数减少,提升网页加载数度
                            name: 'images/[name].[hash].[ext]'
                        }
                    }
                },
                {
                    test: /\.(css|scss|less)$/,
     
                    //"css-loader":会帮我们分析出几个css文件之间的关系,最终把这些css文件合并成一段css;
                    //"style-loader":会把‘css-loader’生成的内容挂在到页面的head部分
                    //在webpack的配置中,loader是有先后执行顺序的,
                    //loader的执行顺序是从下到上,从右到左;
                    //“sass-loader”会先对sass代码进行翻译,翻译为css代码后给到css-loader,
                    //都处理好了之后再交给‘style-loader’挂在到页面上
                    //postcss-loader会自动添加css3的厂商前缀;比如:  transform: translate(100px, 100px)
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 2,
                                modules: true //使得css模块化,
                            }
                        },
                        'postcss-loader',
                        'sass-loader'
                    ]
                },
                {
                    // 可以打包字体文件
                    test: /\.(eot|ttf|svg)$/,
                    use: {
                        loader: 'file-loader'
                    }
                }
            ]
        },
     
        // 打包的出口文件
        output: {
            // 打包后的文件名
            // filename: 'bundle.js',
            filename: '[name].js', //name就是entry值的key:'main','sub'
            // 打包后的文件目录为'dist'
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/' //表示的是我所有的打包生成的文件之间的引用前面都加一个根路径
        },
        //plugin可以在webpack运行到某个时刻的时候,帮你做一些事情(类似生命周期函数)
        plugins: [
            // CleanWebpackPlugin可以在每次打包的时候帮我们对dist目录做一个清空
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                //HtmlWebpackPlugin帮我们自动的生成一个dist目录下的html文件
                template: './src/index.html'
            }),
            //HotModuleReplacementPlugin帮我们实现HMR
            new webpack.HotModuleReplacementPlugin()
        ],
        //在开发模式下配置 tree shakeing
        optimization: {
            usedExports: true
        }
    }
    

    在 package.json 中配置:

    {
        "name": "webpack-demo",
    //@babel/polyfill和css文件不使用tree shaking
        "sideEffects": [
            "@babel/polyfill",
            "*.css"
        ],
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
            "bundle": "webpack",
            "watch": "webpack --watch",
            "start": "webpack-dev-server",
            "server": "node server.js"
        },
        "author": "susie",
        "license": "ISC",
        "devDependencies": {
            "@babel/core": "^7.5.4",
            "@babel/plugin-transform-runtime": "^7.5.0",
            "@babel/preset-env": "^7.5.4",
            "@babel/preset-react": "^7.0.0",
            "autoprefixer": "^9.6.1",
            "babel-loader": "^8.0.6",
            "clean-webpack-plugin": "^3.0.0",
            "css-loader": "^3.0.0",
            "file-loader": "^4.0.0",
            "html-webpack-plugin": "^3.2.0",
            "node-sass": "^4.12.0",
            "postcss-loader": "^3.0.0",
            "sass-loader": "^7.1.0",
            "style-loader": "^0.23.1",
            "url-loader": "^2.0.1",
            "webpack": "^4.35.3",
            "webpack-cli": "^3.3.5",
            "webpack-dev-server": "^3.7.2"
        },
        "dependencies": {
            "@babel/polyfill": "^7.4.4",
            "@babel/runtime": "^7.5.4",
            "@babel/runtime-corejs2": "^7.5.4",
            "react": "^16.8.6",
            "react-dom": "^16.8.6"
        }
    }
    

    如果需要对某个模块不进行Tree Shaking

     "sideEffects": ["@babel/poly-fill"],  //该模块不进行Tree Shaking
    

    为什么某些引入模块不希望进行Tree Shaking呢?

    下面引入的style.css模块,如果也使用tree shaking,由于css文件没有导出任何模块,那么就有可能在打包的时候该引入模块就被摇晃掉了,导致bug。

    在这里插入图片描述
    在package.json中进行配置,即匹配到的任何css文件都不进行Tree Shaking

    在这里插入图片描述
    不使用Tree Shaking打包时,可以看到打包文件中exports provided: add, mins两种方法

    在这里插入图片描述在这里插入图片描述  前端的学习不是一蹴而就,不积跬步无以至千里,不积小流无以成江海。持续不断的努力才能让你我有所收获,专业的知识还得到机构去学习,培训机构的设立有其存在的必然性,你钱花对了吗?


    推荐阅读:
    5分钟学会 vue 路由守卫
    10分钟搞懂vuex
    浅谈hooks
    vue 组件设计原则
    深入解读 vue 修饰符 sync

    展开全文
  • Vue 3.0中的Treeshaking特性?举例说明一下? 1:目的:     目的是Vue团队希望帮助开发者减小web应用体积 2:什么是Treeshaking    TreeShaking是一种术语,在打包时将不打包没有用到的代码,这些代码会成为...

    Vue 3.0中的Treeshaking特性?举例说明一下?

    1:目的:
        目的是Vue团队希望帮助开发者减小web应用体积
    2:什么是Treeshaking
       TreeShaking是一种术语,在打包时将不打包没有用到的代码,这些代码会成为dead code(死代码)
    实际上也就是说,treeShaking在打包时所保留的,是我们用到的代码
    3:如何使用
       由于treeShaking是基于ES6的import和export静态编辑思想确定模块依赖关系的,
    所以
    1:treeShaking在编译阶段会判断模块的加载状态
    2:判断未使用的相关变量,进行移除

    举个例子:
    如果,新创建的项目中,data中的变量1,和变量2被使用了,但是变量3,并没有被使用,那么变量3,会在打包的时候被移除
    在比如,可以对比一下项目在使用treeShaking打包之后和未使用的情况下进行打包后的大小,
    data中的数据都变正常使用,methods的方法也被正常使用,component方法和watch方法未使用,然后进行打包

    答案显而易见,在使用treeShaking后进行打包只会将data和methods这种使用的方法进行打包,而不是打包所有

    4:treeShaking的好处
    1:首先最重要的一点是vue团队在研发treeShaking的初衷,是帮助开发者减小web app应用体积
    2:减少程序打包时间
    3:便于维护优化项目框架

    展开全文
  • 一、是什么Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination简单来讲,就是在保持代码运行结果不变的前提下...

    一、是什么

    Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination

    简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码

    如果把代码打包比作制作蛋糕,传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(没有用的)蛋壳全部挑选并剔除出去

    treeshaking则是一开始就把有用的蛋白蛋黄(import)放入搅拌,最后直接作出蛋糕

    也就是说 ,tree shaking 其实是找出使用的代码

    Vue2中,无论我们使用什么功能,它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的,捆绑程序无法检测到该对象的哪些属性在代码中被使用到

    import Vue from 'vue'
     
    Vue.nextTick(() => {})
    

    Vue3源码引入tree shaking特性,将全局 API 进行分块。如果你不使用其某些功能,它们将不会包含在你的基础包中

    import { nextTick, observable } from 'vue'
     
    nextTick(() => {})
    

    二、如何做

    Tree shaking是基于ES6模板语法(importexports),主要是借助ES6模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量

    Tree shaking无非就是做了两件事:

    • 编译阶段利用ES6 Module判断哪些模块已经加载

    • 判断那些模块和变量未被使用或者引用,进而删除对应代码

    下面就来举个例子:

    通过脚手架vue-cli安装Vue2Vue3项目

    vue create vue-demo
    

    Vue2 项目

    组件中使用data属性

    <script>
        export default {
            data: () => ({
                count: 1,
            }),
        };
    </script>
    

    对项目进行打包,体积如下图

    为组件设置其他属性(comptedwatch

    export default {
        data: () => ({
            question:"", 
            count: 1,
        }),
        computed: {
            double: function () {
                return this.count * 2;
            },
        },
        watch: {
            question: function (newQuestion, oldQuestion) {
                this.answer = 'xxxx'
            }
    };
    

    再一次打包,发现打包出来的体积并没有变化

    Vue3 项目

    组件中简单使用

    import { reactive, defineComponent } from "vue";
    export default defineComponent({
      setup() {
        const state = reactive({
          count: 1,
        });
        return {
          state,
        };
      },
    });
    

    将项目进行打包

    在组件中引入computedwatch

    import { reactive, defineComponent, computed, watch } from "vue";
    export default defineComponent({
      setup() {
        const state = reactive({
          count: 1,
        });
        const double = computed(() => {
          return state.count * 2;
        });
    
        watch(
          () => state.count,
          (count, preCount) => {
            console.log(count);
            console.log(preCount);
          }
        );
        return {
          state,
          double,
        };
      },
    });
    

    再次对项目进行打包,可以看到在引入computerwatch之后,项目整体体积变大了

    三、作用

    通过Tree shakingVue3给我们带来的好处是:

    • 减少程序体积(更小)

    • 减少程序执行时间(更快)

    • 便于将来对程序架构进行优化(更友好)

    参考文献

    • https://segmentfault.com/a/1190000038962700

    面试官VUE系列已完结:33/33

    面试官ES6系列已完结: 10/10

    面试官VUE3番外篇正在更新:5/6

    面试官:Vue3.0的设计目标是什么?做了哪些优化?

    面试官:Vue3.0 性能提升主要是通过哪几方面体现的?

    面试官:Vue3.0里为什么要用 Proxy API 替代 defineProperty API ?

    面试官:Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

    篇副有限,扫下方二维码查看往期

    展开全文
  • 一、什么是 Tree ShakingTree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术,它会在运行过程中静态分析模块之间的导...
  • webpack的tree-shaking

    2020-08-03 21:05:22
    先来看tree-shaking的几种使用情况 情况一 // ./common/util.js import lodash from 'lodash-es'; var func1 = function(v) { alert('111'); } var func2 = function(v) { return v; }; export { func1, func...
  • Tree-Shaking原理

    千次阅读 2020-02-10 22:42:25
    Tree-Shaking性能优化实践 - 原理篇 一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS...
  • Tree shaking必须要依赖于es6的import和export,针对export引用的文件以及真正使用到的部分进行优化处理,而我们在这之前进行了babel转码的操作,对于转码后的es5语法我们就不会使用到tree shaking。 是的,上面的...
  • Webpack 之 treeShaking

    千次阅读 2018-08-21 20:10:00
    基于 ES6 的静态引用,tree shaking 通过扫描所有 ES6 的 export,找出被 import 的内容并添加到最终代码中。 webpack 的实现是把所有 import 标记为有使用/无使用两种,在后续压缩时进行区别处理。因为就如比喻所说...
  • 2. css tree shaking

    2019-12-23 11:15:46
    3.css-tree-shaking purifycss-webpack :移除没有使用到css样式 安装  npm install purifycss-webpack purifycss --save-dev const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const...
  • webpack构建之tree-shaking的原理是什么

    千次阅读 2020-08-20 17:53:03
    我们在开发一个项目的时候,总会遇到这样的...是的,tree-shaking.看名字就知道是将哪些没有用的东西都shaking掉。Tree-shaking是一种通过清楚多余代码的方式来优化项目打包体积的技术。 tree-shaking原理 利用es6
  • webpack之babel-loader使Tree-shaking失效前言一、babel-loader导致Tree-shaking失效的原因二、配置babel-loader后尝试打包 前言 由于早期webpack发展非常快,变化也比较多,所以当我们去找资料时,我们得到的结果...
  • 使用Typescript和Webpack的摇树示例 该存储库显示了如何配置Typescript和Webpack来启用摇树。 如果它们具有ES2015模块格式,它将消除死代码。 可以在app/文件夹中找到源代码,在该目录中,主文件car.js并未使用...
  • tree shaking 及其工作原理

    千次阅读 2021-02-15 15:31:41
    写在前面今天这道题目是在和小红书的一位面试官聊的时候:我:如果要你选择一道题目来考察面试者,你最有可能选择哪一道?面试官:那应该就是介绍一下tree shaking及其工作原理?我:为什么...
  • 什么是treeShakingtreeShaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。 treeShaking有什么用? 至于说有什么用呢?它的作用就是将程序中没有用到的代码在打包编译的时候都...
  • gsap-treeshaking-源码

    2021-05-15 14:44:18
    gsap-treeshaking npm install npm run build
  • webpack tree shaking 踩坑

    2018-12-14 11:27:22
    指定哪些文件是有副作用的,这样webpack在打包的时候就不会将他们删除掉了(关于webpack tree shaking的详细内容可以看 这里 )。我们再去antd的package.json中看一下发现它的 sideEffects 是这样写的: "side...
  • CSS的tree shaking

    2020-09-07 09:28:21
    一、使用purifyCss,遍历代码,识别已经用到的CSS purifyCSS不再维护,使用purgecss-webpack-plugin基于purifycss开发的,mini-css-exract-plugin提取CSS插件配合使用 二、uncss,html通过jsdom加载,样式通过... ...
  • webpack-tree-shaking-源码

    2021-04-29 20:00:25
    Webpack摇树 这是在小型应用程序上进行的Webpack树摇动的实验。 入门 克隆回购 安装依赖项: npm install 做开发构建: npm run dev 生成优化的生产版本: npm run build 在本地运行应用程序(localhost:8080)...
  • Babel和Webpack的摇树示例 该存储库显示了如何配置Babel和Webpack来启用摇树。 如果它们具有ES2015模块格式,它将消除死代码。 可以在app/文件夹中找到源代码,在该目录中,主文件car.js并未使用engine.js所有依赖...
  • 为了实现这一目标我们对两部分代码通过RPC调用的方式实现了代码解耦,而工程解耦依赖于Flutter/Dart在编译过程中的Tree-Shaking机制。为了避免踩坑,我们需要了解,整个Tree-Shaking是怎么起作用的。本篇文章结合...
  • 如何使用Tree-shaking减少代码构建体积 前言 在实际配置Webpack过程中总会遇到一些坑,Tree-shaking就是其中之一,按照教程中一步步配置,你会发现配了半天还是不生效,本文 就是为了解决这个问题而写,希望看到...
  • 编者按:本文转载相学长的知乎文章,来一起快乐学习吧本文将探讨tree-shaking在当下的现状,以及研究为什么tree-shaking依旧举步维艰的原因,最终总结当下能提高tree-s...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,753
精华内容 2,701
关键字:

shakingtree