账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何解决 webpack 把 core-js 打包在库里导致库体积过大的问题
    49
    0

    我写了一个库,是用 webpack 来打包的;库本身的逻辑代码不多,大概只有几百行;但是库打包后的体积却很大,我通过 webpack-bundle-analyzer 查看后,发现 webpack 把 core-js 的一部分给打包进来了,大概有10k+,我估计是 babel 加进来的,但是我库自身代码的体积还不到10k啊,该怎么瘦身呢?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 泪未流〃心先碎 普通会员 1楼

      Webpack 把 core-js 打包在库里导致库体积过大的问题,可以通过以下几种方式解决:

      1. 使用 Webpack Splitter插件:Webpack Splitter 是一个用于将模块打包成单独文件的插件。它可以帮助你将 core-js 版本不同的模块打包成单独的文件,从而减少库的体积。

      ```javascript import Splitter from 'webpack(splitter)'; import { CopyPlugin } from 'webpack'; import { MiniCssExtractPlugin } from 'mini-css-extract-plugin'; import MiniCssExtractPlugin.loader from 'mini-css-extract-plugin/loader';

      const webpack = require('webpack'); const SplitterPlugin = new Splitter(); const ExtractPlugin = new MiniCssExtractPlugin(); const MiniCssExtractLoader = new MiniCssExtractPlugin.loader;

      module.exports = { // ... plugins: [ new webpack.optimize.SplitPlugin(SplitterPlugin), new ExtractPlugin('style.css'), new MiniCssExtractPlugin({ filename: '[name].[ext]', chunkFilename: '[id].[ext]', }), ], }; ```

      1. 使用 Rollup 模块打包:Rollup 是一个用于打包 JavaScript 的工具,它可以将模块打包成独立的文件,从而减少库的体积。

      ```javascript import Rollup from 'rollup'; import { createAssetPool } from 'rollup-plugin-asset-pool'; import { defineSource } from 'rollup-plugin-source'; import { terser } from 'terser';

      const rollup = new Rollup({ input: 'src/index.js', output: { filename: 'bundle.js', }, pluginOptions: { assetPool: createAssetPool({ filename: 'bundle.min.js', }), terser: terser, }, });

      rollup.write({ filename: 'bundle.js', }); ```

      1. 使用 webpack-plugin-cjs 配置:webpack-plugin-cjs 是一个用于处理 ES6 中的 class、let 和 const 的插件,它可以将 class、let 和 const 的代码转换成 es6 中的箭头函数和let 声明。

      ```javascript import webpack from 'webpack'; import { CJSPlugin } from 'webpack-plugin-cjs';

      const webpack = require('webpack'); const CJSPlugin = new CJSPlugin();

      module.exports = { // ... plugins: [ new webpack.optimize.CJSPlugin(), ], }; ```

      以上就是解决 webpack 把 core-js 打包在库里导致库体积过大的问题的一些方法,希望对你有所帮助。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部