This update is primarily focused on optimising the bundle size by modifying the loading mechanism for the audio module. By refactoring the webpack configuration and employing a remote fetching strategy for the audio module, we've significantly reduced the user script size, ensuring it stays below the 2MB limit imposed by the hosting platform, while maintaining the functionality and performance.
Changes:
ES6 Modules
Converted all dependencies (internal and external) from CommonJS requires syntax to ES6 import/export syntax
Allows for tree shaking and static dependency analysis
Webpack Configuration:
Introduced a production build mode to the webpack configuration to ensure better optimisation during the build process.
Adjusted the output file naming and path resolution to properly handle the main script and the audio module.
Configured the webpack to avoid minification in production mode as per the guidelines of the hosting platform.
Audio Module Loading:
Implemented a remote fetching mechanism for loading the audio module to reduce the bundle size.
Ensured the fetch request adheres to CORS and SSL configurations for both development and production environments.
Server Configuration:
Updated the server launch condition to properly identify the script execution context.
Environment Variables:
Ensured that the production build uses the .env.production file for loading environment variables.
Benefits:
Size Reduction: The user script size has been reduced from 2.5MB to 357KB, a reduction of approximately 86%.
Performance: The remote fetching strategy maintains a good performance while reducing the load on the client-side.
Compliance: The update ensures compliance with the hosting platform's guidelines regarding script size and minification.
Testing:
Conducted local testing to ensure the script and the audio module are loaded and executed correctly.
Verified the size reduction and ensured the total size is well below the 2MB limit.
Ensured that the SSL and CORS configurations are correctly set up for the fetch operation.
Deployment:
This update does not introduce any breaking changes and can be deployed without affecting the existing users.
Recommend bumping the version to v1.4.6 to reflect the optimization and the bug fixes incorporated in this update.
Release to www.saypi.ai, greasyfork.org, and openuserjs.org
Future Work:
Explore further optimizations and potentially revisit the audio module loading mechanism for any further improvements.
Monitor the performance and gather user feedback to identify any areas for improvement in the future releases.
Release all future versions on GreasyFork and OUJS, since users installing from those repos did not receive updates elsewhere.
This update is primarily focused on optimising the bundle size by modifying the loading mechanism for the audio module. By refactoring the webpack configuration and employing a remote fetching strategy for the audio module, we've significantly reduced the user script size, ensuring it stays below the 2MB limit imposed by the hosting platform, while maintaining the functionality and performance.
Changes:
ES6 Modules
requires
syntax to ES6import/export
syntaxWebpack Configuration:
Audio Module Loading:
Server Configuration:
Environment Variables:
.env.production
file for loading environment variables.Benefits:
Testing:
Deployment:
Future Work: