使用Webpack打包微信小程序页面 + npm依赖, 降低主包体积. 将npm包打包到分包或者页面中. 摆脱"构建npm"

前言

书接上文, 本人正在做微信小程序项目的数据可视化业务, 发现使用的Antv F2的包体积过于庞大. 引入的@antv/f2和@antv/wx-f2, 压缩前体积已经达到了2.24MB. 虽然微信小程序上传时会执行代码压缩, 但是考虑到只是用了其中几个方法, 却要引入整个库, 况且微信小程序打包时候不会进行Tree Shaking. 我觉得我需要做手动打包优化了.

我的需求

由于当前小程序项目已经很庞大了, 不适合迁移到Uniapp或者Taro这样支持打包优化的第三方构建工具中. 性价比比较高的是再另起一个项目开发所需页面, 将页面和第三方库打包到一起, 再粘贴到当前项目中.

寻找解决方式

我参考了 github.com/listenzz/My… 这位大佬的操作, 使用了他的Webpack配置, 并做了如下修改:

// webpack.config.js
optimization: {
    //    splitChunks: {
    //       chunks: 'all',
    //        name: 'common',
    //        minChunks: 2,
    //        minSize: 0,
    //    },
    splitChunks: {
        cacheGroups: {
            common: {
                name: 'packageA/pages/daping/common',
                chunks: 'all',
                minChunks: 2,
                minSize: 0,
                priority: -10,
                reuseExistingChunk: true,
            },
    },
},

在新建的项目编写完成后, 执行yarn build, 会生成打包压缩后的代码, 移动到所需项目中即可

然后在引入文件的项目的app.js中引入runtime

大功告成!