perf(dicts): only load necessary styles

config/webpack.config.prod.js

@@ -61,6 +61,14 @@ const entries = fs.readdirSync(paths.appSrc)
 
 const entriesWithHTML = entries.map(({name, dirPath}) => ({name, dirPath, template: path.join(dirPath, 'index.html')}))
   .filter(({template}) => fs.existsSync(template))
+
+// add dictionary styles
+const dictStyleEntries = {}
+fs.readdirSync(path.join(paths.appSrc, 'components/dictionaries')).forEach(name => {
+  if (name === 'helpers.ts') { return }
+  dictStyleEntries[`dicts/${name}`] = path.join(paths.appSrc, 'components/dictionaries', name, '_style.scss')
+})
+
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
 // The development configuration is different and lives in a separate file.
@@ -73,11 +81,13 @@ module.exports = {
   // In production, we only want to load the polyfills and the app code.
   entry: entries.reduce((result, {name, dirPath}) => {
     const names = fs.readdirSync(dirPath)
-    const indexFile = names.find(name => /index\.((t|j)sx?)$/.test(name))
+    const indexFile = names.find(name => /index\.(ts|tsx|js|jsx|css|scss)$/.test(name))
     if (!indexFile) { throw new Error(`Missing entry file for ${dirPath}`) }
-    result[name] = [require.resolve('./polyfills'), path.join(dirPath, indexFile)]
+    result[name] = indexFile.endsWith('css')
+      ? path.join(dirPath, indexFile)
+      : [require.resolve('./polyfills'), path.join(dirPath, indexFile)]
     return result
-  }, {}),
+  }, dictStyleEntries),
   output: {
     // The build folder.
     path: paths.appBuild,

scripts/build.js

@@ -169,7 +169,11 @@ function generateByBrowser () {
         filter: file => !/[\\\/]+\./.test(file),
       }),
       // project files
-      ...files.map(file => fs.copy(file.path, path.join(dest, file.name)))
+      ...files.map(file => fs.copy(file.path, path.join(dest, file.name), {
+        dereference: true,
+        // remove js files for css only chunks
+        filter: file => !/[\\\/]+(panel(-internal)?|dicts[\\\/]+[^\\\/]+)\.js(\.map)?$/.test(file)
+      }))
     ])
   })).then(() => Promise.all(files.map(file =>
     // clean up files

src/components/dictionaries/google/_style.scss

@@ -0,0 +1 @@
+@import '../../MachineTrans/_style';

src/components/dictionaries/liangan/_style.scss

@@ -0,0 +1 @@
+@import '../guoyu/_style';

src/components/dictionaries/sogou/_style.scss

@@ -0,0 +1 @@
+@import '../../MachineTrans/_style';

src/content/components/DictPanel/index.tsx

@@ -259,6 +259,9 @@ export class DictPanel extends React.Component<DictPanelProps & { t: Translation
             })
           })}
         </div>
+        {dictionaries.active.map(id =>
+          <link key={id} rel='stylesheet' href={browser.runtime.getURL(`/dicts/${id}.css`)} />
+        )}
       </div>
     )
   }

src/panel-internal/panel-internal.scss → src/panel-internal/index.scss

@@ -23,4 +23,4 @@ h5, .h5, h6, .h6 {
   font-size: 0.83em;
 }
 
-@import '../panel/panel';
+@import '../panel/index'

src/panel/panel.scss → src/panel/index.scss

@@ -17,5 +17,4 @@
 @import '../content/components/MenuBar/style';
 @import '../content/components/DictItem/style';
 
-@import '../components/MachineTrans/style';
 @import '../components/Speaker/style';