XLSX bundle size using Webpack

[vijayst]

The XLSX bundle size after webpack build is huge. Before minification, the size is 1.03 MB. Is there any way to reduce the bundle size using any modular techniques? Examples of packages are antd and lodash which provides options to reduce the bundle size. It will be good to have a plugin for webpack (webpack-plugin-xlsx) which reduces the bundle size (by cherry-picking relevant modules). Thanks.

[SheetJSDev]

There's really not much we can do on the modularity front. There are three major hurdles:

1) Webpack and other bundlers are unable to tree-shake CommonJS modules. Even modern browsers and node cannot process ES6 modules natively (you have to use a transpiler), in part because the loader spec hasn't been finalized, so we are unlikely to switch to ES6 module structure anytime soon.

2) Webpack has difficulty processing typeof-guarded require statements. See my comment from another thread for more details, but basically Webpack isn't intelligent enough to process libraries which have optional hooks in the browser and typeof-check for require.

3) Most of the logic is shared across formats. For example, all of the formats use the spreadsheet format library in some capacity, either on the parse side (like XLSX and XLSB and XLS) or on the write side (like CSV or JSON). As for other libraries, Lodash is a hodgepodge of utility functions so it makes sense to be able to pick and choose features. _.now is basically independent and can live on its own.

If you know you aren't dealing with non-English users, you can suppress the codepage optional library in your webpack config:

module.exports = {
    /* ... */
    resolve: {
        alias: { "./dist/cpexcel.js": "" }
    },
    /* ... */
}

[cag2050]

The solution to optimize project (includes xlsx) builded with vue-cli，website：https://segmentfault.com/a/1190000014284449

[yss14]

For me it works with webpack code splitting.

With

const xlsx = await import('xlsx');

or

import('xlsx').then(xlsx => {
    // do something with xlsx
});

the main bundle size isn't affected and the xlsx packages is split into a separate 344KB bundle, which is only loaded via the network when needed.

[SheetJSDev]

0.15.0 ships with a mini build that is limited to XLSX operations (xlsx.mini.min.js). It is 180K uncompressed / 57K compressed.

XLS support requires the huge codepage library, there isn't much room for reducing the bundle size. If there is another specific slice that you need (say, just the read functionality), we can look into preparing another mini build.

[deniztetik]

Looks like xlsx.mini.min.js still requires codepage when I try to use that build instead of the default one provided by the package. Am I missing something here?

[SheetJSDev]

We tested in a direct script tag injection (http://sheetjs.com/demos/tablemini) but not in a bundle setup :( it'll be corrected in the next release

[jHabjanMXP]

Any updates? Will proper tree-shaking be available?

[itayperry]

@yss14 - is there any way to do what you did in Angular?

[yss14]

@itayperry Never used Angular, but I think so. Just google for Code-splitting in Angular ;) That's what I did with react. The webpack setup has to support code splitting btw.!

[mrtampan]

thank @yss14 and @SheetJSDev

i use vuejs. it works for me

but vuejs should create a vue.config.js file, containing:

module.exports = {
    configureWebpack:{
      resolve: {
        alias: { "./dist/cpexcel.js": "" }
      }
    }
  }