6 easy tricks to achieve insane load speed of your Chrome extension with Webpack
I have always been a movie buff and wanted to make something around movies. So, I made Quotic for Chrome. It’s a simple Chrome extension that shows random movie quotes whenever you open a new tab.
In this post, I will show you how I optimised Quotic to load fast using Webpack.
Here are some of the issues that needed to be solved:
- Images taking too long to load.
- Resizing of images.
- Minification of HTML, CSS and Javascript.
- Extra call to load the CSS.
- Copying of static assets to the build folder.
- Making zip of the build folder (Optional).
If you need a primer on how to create a chrome extension or set up Webpack, you can check out these excellent posts:
Now the solution!
If you want to follow along, here is my starting Webpack config file:
Now let’s address each problem one by one.
1. Image Loading Time
Every image was taking around 500ms+ to load (causing a glitch). So, I decided to convert every image to data-uri.
How did I do it? Luckily, Webpack does it for you. There is a loader for Webpack named url-loader that can convert your images to data-uri.
Here is the code I wrote to set it up:
And the result?- Load time of 1ms for images. 😎
2. Resizing of Images
Some images were way too big. They needed to be resized, but I didn’t want to resize and compress them manually.
Again Webpack to the Rescue :D
There are two loaders for webpack “image-maxsize-webpack-loader” and “image-webpack-loader” that will do the trick.
- image-maxsize-webpack-loader — resizes images!
- image-webpack-loader — compresses images!
Code snippet written to achieve the goal:
3. Minification of HTML,CSS and Javascript
Let’s do this step by step. First, let’s minify HTML. Just paste the following code in your HtmlWebpackPlugin and that will do the job.
(I will talk about the CSS minification in next section. Lets minify JS only for now.)
To minify JS, all you need to do is add webpack.optimize.UglifyJsPlugin to your plugins with some options (Be careful, this is not available in webpack ≥ 4, it is a separate package now.)
4. Inline CSS
I didn’t want to make an extra call to load the CSS. So, I decided to make CSS inline. Also, in the last section, we didn’t minify the CSS. Let’s address that as well.
To do both tasks, we will use another plugin — style-ext-html-webpack-plugin. ( This package is dependent on extract-text-webpack-plugin )
Notice the minify option in StyleExHtmlWebpackPlugin. (It is minifying the extracted css)
5. Copying the static assets to build folder
There were some assets that needed to copied to the build folder, like icons and manifest.json. There is a very easy way to do that with Webpack. Just use the copy-webpack-plugin and tell it which files need to copied. Simple!
Now my icons and manifest.json file will be copied to the root of build folder 😀
6. Zipping the build folder
Chrome Web Store requires you to upload a zip file of your plugin. I had to manually create a zip every time to release a new build. Why don’t we move this manual task to webpack? 🤔
Luckily, there is a package that does exactly this — webpack-zip-plugin.
Here is the final webpack config file:
With these optimisations, the extension was ready to launch. I submitted it to Chrome store and shared it with some friends. The feedback was positive. No issues of loading times or glitches.
If you are interested in checking it out, you can find it here:
Future Plans:
In the coming weeks, I plan to replace React with Preact to achieve even high benchmarks. Since this is a personal project, these numbers matter a lot.
If you want to know how I am going to do that, do give me a follow! 😃
If you liked the article and gained something from it, do not forget to give it some claps. They matter too!
If you have anything to add, or have any suggestions about the code, please leave your responses!
I will see you again in the next post. Till then, keep smiling, keep coding. 🙂Bye!
