V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
PageSpeed 相关文档
为 NGINX 编译 PageSpeed 支持
ngx_pagespeed
Configuring mod_pagespeed Filters
加载性能测试工具
WebPagetest
Gomez
MuscleOf2016
V2EX  ›  前端优化

import 引用模块如何优雅的减少 webpack 打包体积?

  •  
  •   MuscleOf2016 · 2019-06-14 16:48:06 +08:00 · 3732 次点击
    这是一个创建于 2018 天前的主题,其中的信息可能已经有所发展或是发生改变。

    除了使用以下根据 npm 包中模块文件路径来按需引用,这种方式减少打包体积, 还有什么更优雅的方式,这样多个模块就要多个 import 了

    import aaa from 'package/pathA';
    import bbb from 'package/pathB';
    import ccc from 'package/pathC';
    
    6 条回复    2019-06-15 11:17:08 +08:00
    IsaacYoung
        1
    IsaacYoung  
       2019-06-14 17:05:22 +08:00
    1. tree shaking
    import { whatYouNeed } from 'package/A'

    2. dynamic import
    import('path/to/your/package').then( module => {
    // use module here
    })
    MuscleOf2016
        2
    MuscleOf2016  
    OP
       2019-06-14 17:12:05 +08:00
    @IsaacYoung 这两种应该都是从引入模块路径的角度去减少体积。我在想有没有 webpack 有没有什么插件或者什么方式,可以检查引入的 package,自动提取出使用的模块 module1,那么我的代码只要像下面这么写就好了。
    ```
    import { module1 } form 'Package';
    module1.fun1();
    ```
    wwqgtxx
        3
    wwqgtxx  
       2019-06-14 17:26:04 +08:00 via iPhone
    js 动态性太强了,想要追踪 fun1 到底依赖了哪些文件非常困难,而且很容易遗漏
    就像 java 的 jdk 剪裁,一不小心就会掉到反射的坑
    MuscleOf2016
        4
    MuscleOf2016  
    OP
       2019-06-14 17:45:55 +08:00 via iPhone
    @wwqgtxx 所以只能做到像上面那样,根据路径去优化咯?
    qiuyk
        5
    qiuyk  
       2019-06-15 09:31:16 +08:00 via iPhone
    @MuscleOf2016 现在基本只有这个办法和粒度了,即使是 tree shaking 还要标明无副作用,webpack 和 rollup 才能判断出来扔掉哪些没用的代码
    MuscleOf2016
        6
    MuscleOf2016  
    OP
       2019-06-15 11:17:08 +08:00 via iPhone
    @qiuyk 好的,谢谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5782 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 06:31 · PVG 14:31 · LAX 22:31 · JFK 01:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.