@dreysolano/prerender-spa-plugin打包,没有打包全对应的路由文件

我使用的是@dreysolano/prerender-spa-plugin

在这里我写了一些我需要单独打包成一个html文件的路由

插件错误配置图片

打包出来的dist目录是这样的,可以看到少打包了一些路由,找了好久没看到有人出现这种情况,可能是我的垃圾代码有问题。但是不知道问题出在哪里

错误的打包目录

然后看了看终端,有个警告,说的是(入口点大小限制),有些入口文件组合资源大小超过建议的限制了

终端警告图片

一看是入口文件限制,说的还是两个js文件,打包还正好少了两个html,感觉没跑了,让chart配置了一下webpack。

config.optimization = {
   splitChunks: {
     cacheGroups: {
       prerender: {
         test: /[\\/]src[\\/](views|components)[\\/]/,
         name: 'prerender',
         chunks: 'all',
         enforce: true,
       },
     },
   },
 };

这个配置的意思好像是打包出这些视图对应的代码块,公用这些代码块,这样的话,入口文件就小了,因为有的资源需要单独的再去获取了,不太懂webpack,评论区有大佬可以讲一下。ps:估计大佬观看不到这篇文章
再次打包,就出现丢失的两个模块了

打包成功

但其实终端还是有一个js文件出现了入口文件过大,在配置optimization之前,我有试过配置performance,但是并没有用,没有打包出对应的html。但他不会报警告了。

config.performance = {
   hints: 'warning',
   // 入口起点的最大体积
   maxEntrypointSize: 200*1024*1024,
   // 生成文件的最大体积
   maxAssetSize: 100*1024*1024,
   // 只给出 js 文件的性能提示
   assetFilter: function (assetFilename) {
     return assetFilename.endsWith('.js')
   }
 };
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将Vue项目改为使用prerender-spa-plugin,需要进行以下步骤: 1. 安装prerender-spa-plugin插件: ``` npm install prerender-spa-plugin --save-dev ``` 2. 在webpack配置文件中引入插件: ``` const PrerenderSPAPlugin = require('prerender-spa-plugin'); ``` 3. 在plugins数组中添加插件配置: ``` plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/', '/about', '/contact'], // 可选项,生成的文件存储的路径,默认为 `./prerendered` outputDir: path.join(__dirname, 'prerendered'), // 可选项,生成文件的后缀名,默认为 `.html` postProcess (renderedRoute) { // 对渲染后的路由文件进行额外处理 } }) ] ``` 4. 在`package.json`文件中添加一个脚本: ``` "scripts": { "prerender": "npm run build && node prerender.js" } ``` 5. 创建一个名为`prerender.js`的文件,并添加以下代码: ``` const path = require('path'); const PrerenderSPAPlugin = require('prerender-spa-plugin'); const rendererPath = path.join(__dirname, 'dist', 'server', 'bundle.js'); const renderer = require(rendererPath); const options = { staticDir: path.join(__dirname, 'dist'), routes: ['/'], renderer: new PrerenderSPAPlugin.PuppeteerRenderer({ renderAfterDocumentEvent: 'render-event', headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'], }), }; const prerenderer = new PrerenderSPAPlugin(options); prerenderer .initialize() .then(() => { return prerenderer.renderRoutes(['/']); }) .then((renderedRoutes) => { console.log('Prerendering successful!'); console.log(renderedRoutes); }) .catch((error) => { console.error('Prerendering failed:'); console.error(error); }); ``` 6. 运行`npm run prerender`命令,生成预渲染文件。 以上就是将Vue项目改为使用prerender-spa-plugin的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值