[webpack] Optimization for Production Environment

[圈爷]

Test with a clean install

I tested in the development environment with --static-files and got the same results

[Andrew R. Powers]

It's using standard Webpack 4 under the hood, which does what it does to give you this result.

What is it, in particular, you don't like?

[圈爷]

main.js is too large (1.7M) and has more than 60% unused code, so the lighthouse scores is very low, note that I'm testing locally above, the actual deployment is a bit worse, So for users, this homepage loading speed seems hard to accept, So is there anything I can optimize?

for example, how can I split the common public module like vue?
and use cdn versions to replace them?

[Andrew R. Powers]

Are you gzipping or similar? You may want to run the --analyze option on build and see what is causing the size to jump.

W our internal apps we typically get a bundle size around 1mb that compresses down to around 350kb which we think is acceptable.

As for lighthouse scores... The state of optimizing JS apps is moving very fast as libs finally convert to es6. The next major update to factor will benefit.

[圈爷]

I messed around with the webpack.config, and it's better now.

What I did,

1. Add CompressionPlugin to generate static gzip files to make Nginx gzip_static work.
2. Use splitChunks to to limit the maximum file size
3. Resolved a highly duplicated reference (bn.js)

Not yes,

1. Merge fragmented tiny CSS files
2. Tried to automatically resolve the modules with DirectoryNamedWebpackPlugin, but it doesn't seem to work

Other ideas,

1. About S3 plugin, it should automatically add the cache_expire value.
2. I'm thinking of replacing S3 and writing an imagekit plugin instead.
   Since factor doesn't seem to be doing much on image preprocessing at this moment,
   I don't know if the current markdown engine used by factor supports image parameters.
   I think it would be easier to write an imagekit plugin if it was supported.
   This will solve the problem of image cropping, scaling, compression and multiple sizes.

So far, I've developed a question, why not use Nuxt as a basic engine?
Cuz, the various problems I've encountered , most of which I've found answers or solutions from the Nuxt community 😆
eg, PWA/AMP, Static Improvements...

[Andrew R. Powers]

Awesome work, I'm about to start back on Factor for some internal dev and will take a look.

One reason this project is semi "on hold" is because the ground seems to be moving under it's feet w Vue3, Webpack 5, esbuild and Vite. Would love to have some additional core devs as we look to a more concise and performant Factor v2

[Dominic]

Awesome work, I'm about to start back on Factor for some internal dev and will take a look.

One reason this project is semi "on hold" is because the ground seems to be moving under it's feet w Vue3, Webpack 5, esbuild and Vite. Would love to have some additional core devs as we look to a more concise and performant Factor v2

please don't let factor fall asleep :) it is realy awesome... :)

[Andrew R. Powers]

I'm currently looking at the new Vue stuff as Id really love to move away from Webpack. The primary issue is the rapid and unstable changes being made to crucial stuff that Factor has to use under the hood.

[圈爷]

I'm currently looking at the new Vue stuff as Id really love to move away from Webpack. The primary issue is the rapid and unstable changes being made to crucial stuff that Factor has to use under the hood.

try snowpack