The E Chrome App Store is chock full of products, with plugins for programmers that can improve the user experience and productivity, such as when browsing github.

SourceGraph

Domestic visit: extfans.com/extension/d… I first found it in the Chrome store and it was a great experience to use it. I can browse the project on Github and see the variable types, function interfaces and so on inferred by Code Intelligence in real time.

It also supports mouse-over to see the reference relationship of variables, especially for class, method definition and reference retrieval, and can jump to the corresponding file. It is a quick code viewer, but online editing and commit are not currently supported. If you can connect to github’S API, you can make it more powerful. This project is also open source, the address of the project, I searched the issue and didn’t see the issue providing editing function, maybe everyone would like to clone the local editing.

Infinity new TAB

Domestic visit: extfans.com/extension/d…

Open the new TAB and the page will come out, you can use beautiful weather, to-do list, history management, application management, Evernote like note-taking app, HD wallpaper, Bing, Baidu, Google search. My favorite feature is to-do list, and App Manager shows you the PWA app you pin to your desktop, as well as all your current Chrome extensions, much faster and easier than opening it from Inside Chrome Settings.

Lighthouse

Lighthouse is a Google add-on that is now integrated into the Dev Tools Audits column and can be used to audit websites for performance, PWA compliance, and more. Support common page load time statistics, such as first screen content time, ** first screen response time (TTI) **, etc., and propose corresponding solutions. Such as

  • Remove render-blocking resources, a large number of JS files can be placed at the end of the body, preferably SSR placeholder content

  • Open Gzip, which is critical for text content such as JS, and can often achieve bandwidth savings of up to 70%

  • For image resources, only appropriate formats are needed, such as the new generation of JPG2000, WEBP and other formats, rather than PNG, which has a low compression rate

  • Resources outside the first screen can be lazy loading, code split

PS: the vue – cli3. X

The recent launch of VUE-CLI3. x impressed me a lot. Although iView team also had cli GUI tools before, vue-CLI did make architectural changes this time. In fact, it also borrowed the features of react CLI and hid the packages. Let the development can be easier to build projects. Even configuration of typescript, PWA, etc is generated with one click, which is very efficient.

And the new generation of CLI has built in a relatively complete Webpack configuration, let prod version packaging using code splitting, tree shaking and other strategies. The initial project of TS + PWA + Vue + Router can be less than 50Kb. In the later stage, various business module components are added. It is quite hopeful that the first screen resources of small and medium-sized projects can be less than 200Kb

Hopefully these plug-ins are helpful.